:root {
    --green1: #0a1a12;
    --green2: #1a3c2b;
    --green3: #2d5a3d;
    --gold: #fbbf24;
    --gold2: #d97706;
    --white: #f8fafc;
    --gray: #94a3b8;
    --card: rgba(18, 35, 25, 0.92);
    --border: rgba(251,191,36,0.12);
    --radius: 14px;
    --shadow: 0 8px 32px rgba(0,0,0,0.4);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--green1);
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset:0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 50%, rgba(45,90,61,0.25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(251,191,36,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 90%, rgba(45,90,61,0.15) 0%, transparent 50%);
    pointer-events:none;
    z-index:0;
}

body::after {
    content:'';
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='3' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0;
}

.container { max-width:1120px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }

/* Top Bar */
.topbar {
    background:rgba(10,26,18,0.96);
    border-bottom:1px solid var(--border);
    padding:0.8rem 0;
    position:sticky; top:0; z-index:100;
    backdrop-filter:blur(12px);
}
.topbar .container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.2rem; font-weight:900; color:var(--gold); text-transform:uppercase; letter-spacing:1.5px; text-decoration:none; white-space:nowrap; display:flex; align-items:center; gap:3px; }
.logo span { color:var(--white); font-weight:300; }
.topbar nav { display:flex; gap:1.2rem; align-items:center; }
.topbar nav a { color:var(--gray); text-decoration:none; font-weight:600; font-size:0.85rem; transition:color .2s; }
.topbar nav a:hover { color:var(--gold); }

/* Hero */
.hero {
    text-align:center;
    padding:4rem 0 2rem;
    position:relative;
}
.hero::before {
    content:'⚽';
    position:absolute;
    top:1rem; right:8%;
    font-size:7rem; opacity:0.05;
    animation:float 7s ease-in-out infinite;
}
@keyframes float {
    0%,100% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(-25px) rotate(8deg); }
}

.badge {
    display:inline-flex; align-items:center; gap:0.5rem;
    background:rgba(251,191,36,0.12);
    color:var(--gold);
    padding:0.4rem 1.2rem;
    border-radius:50px;
    font-size:0.8rem; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
    border:1px solid rgba(251,191,36,0.15);
    margin-bottom:1.5rem;
}

.hero h1 {
    font-size:clamp(2.2rem, 6vw, 4rem);
    font-weight:900; text-transform:uppercase;
    line-height:1.1; margin-bottom:0.8rem;
    background:linear-gradient(135deg, var(--gold) 0%, #fff 40%, var(--gold) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero .sub {
    font-size:clamp(1rem, 2vw, 1.3rem);
    color:var(--gray);
    max-width:680px; margin:0 auto 2rem;
    line-height:1.6;
}

.price-hero {
    font-size:clamp(2.5rem, 5vw, 3.5rem);
    font-weight:900; color:var(--gold);
    margin-bottom:0.3rem;
}
.highlight-tech {
    display:inline-block;
    background:linear-gradient(135deg, rgba(251,191,36,0.15), rgba(217,119,6,0.05));
    border:1px solid rgba(251,191,36,0.2);
    padding:0.1rem 1rem;
    border-radius:50px;
    font-weight:800;
    color:var(--gold);
    letter-spacing:0.5px;
    box-shadow:0 0 20px rgba(251,191,36,0.08);
}
.price-old {
    font-size:1.2rem !important;
    font-weight:600 !important;
    opacity:0.6;
}
.price-hero small {
    font-size:1rem; font-weight:400; color:var(--gray);
    text-decoration:line-through; margin-right:0.5rem;
}

/* Features */
.features {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:1.2rem;
    margin:2.5rem 0 2rem;
}
.feature {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.5rem;
    text-align:center;
    transition:all .3s;
}
.feature:hover { transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow); }
.feature .icon { font-size:2.5rem; margin-bottom:0.7rem; }
.feature h3 { font-size:1rem; font-weight:700; margin-bottom:0.4rem; }
.feature p { font-size:0.85rem; color:var(--gray); line-height:1.5; }

/* Buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
    padding:0.9rem 2.2rem; border:none; border-radius:10px;
    font-weight:800; font-size:1rem; cursor:pointer;
    transition:all .25s; text-decoration:none;
}
.btn-gold {
    background:linear-gradient(135deg, var(--gold), var(--gold2));
    color:var(--green1);
    box-shadow:0 4px 20px rgba(251,191,36,0.3);
}
.btn-gold:hover { transform:scale(1.04); box-shadow:0 6px 30px rgba(251,191,36,0.45); }
.btn-block { width:100%; }
.btn-sm { padding:0.5rem 1rem; font-size:0.85rem; }
.btn-outline {
    background:transparent; border:2px solid var(--gold); color:var(--gold);
}
.btn-outline:hover { background:var(--gold); color:var(--green1); }
.btn-danger { background:rgba(239,68,68,0.15); color:#fca5a5; border:1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background:rgba(239,68,68,0.3); }
.btn-white { background:var(--white); color:var(--green1); }
.btn-white:hover { background:var(--gold); }

/* Seções */
.section {
    padding:3rem 0;
}
.section-title {
    text-align:center; margin-bottom:2.5rem;
}
.section-title h2 {
    font-size:1.8rem; font-weight:800; text-transform:uppercase;
    margin-bottom:0.5rem;
}
.section-title p { color:var(--gray); font-size:1rem; }

/* Stickers Grid (pós-compra) */
.stickers-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
    gap:1rem;
}
.sticker-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    transition:all .3s;
}
.sticker-card:hover {
    transform:translateY(-4px);
    border-color:var(--gold);
    box-shadow:var(--shadow);
}
.sticker-card-head {
    height:120px;
    display:flex; align-items:center; justify-content:center;
    font-size:3rem;
    background:linear-gradient(135deg, var(--green2), var(--green3));
}
.sticker-card-body {
    padding:1rem;
}
.sticker-card-body h3 { font-size:0.9rem; font-weight:700; margin-bottom:0.5rem; }
.sticker-card-body .btn { font-size:0.8rem; padding:0.4rem 0.8rem; }

/* Modal */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(6px);
    display:none; justify-content:center; align-items:center;
    z-index:1000; padding:20px;
}
.modal-overlay.active { display:flex; }
.modal {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    max-width:480px; width:100%;
    padding:2rem;
    position:relative;
    animation:modalIn .3s ease;
}
@keyframes modalIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.modal-close {
    position:absolute; top:1rem; right:1rem;
    background:none; border:none; color:var(--gray);
    font-size:1.5rem; cursor:pointer; transition:color .2s;
}
.modal-close:hover { color:var(--gold); }
.modal h2 { font-size:1.4rem; font-weight:800; color:var(--gold); margin-bottom:1.2rem; }

.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--gray); margin-bottom:0.3rem; }
.form-group input {
    width:100%; padding:0.75rem 1rem;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px; color:var(--white); font-size:0.95rem;
    transition:border-color .2s;
}
.form-group input:focus { outline:none; border-color:var(--gold); }
.form-group input::placeholder { color:rgba(148,163,184,0.4); }

.alert { padding:0.8rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:0.9rem; }
.alert-error { background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.25); color:#fca5a5; }
.alert-success { background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.25); color:#86efac; }

.qr-wrap {
    background:#fff; border-radius:12px; padding:0.8rem;
    display:inline-block; margin-bottom:1rem;
}
.qr-wrap img { display:block; width:180px; height:180px; }
.pix-code {
    background:rgba(255,255,255,0.04);
    border:1px dashed rgba(255,255,255,0.12);
    border-radius:8px; padding:0.7rem;
    font-size:0.7rem; word-break:break-all;
    color:var(--gray); cursor:pointer; user-select:all;
    margin-bottom:1rem;
}
.pix-code:hover { border-color:var(--gold); }

.spinner {
    display:inline-block; width:20px; height:20px;
    border:3px solid rgba(251,191,36,0.2);
    border-top-color:var(--gold);
    border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* Pós-compra */
.acesso-header {
    text-align:center; padding:3rem 0 1rem;
}
.acesso-header h1 { font-size:2rem; color:var(--gold); margin-bottom:0.5rem; }
.acesso-header p { color:var(--gray); }

/* Admin */
.admin-body { background:#0c1920; }
.admin-body .topbar { background:rgba(12,25,32,0.98); }
.admin-wrap { display:flex; min-height:calc(100vh - 55px); }
.admin-sidebar {
    width:220px; background:rgba(20,35,45,0.6);
    border-right:1px solid rgba(255,255,255,0.04);
    padding:1.2rem;
}
.admin-sidebar a {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.65rem 1rem; color:var(--gray);
    text-decoration:none; border-radius:8px;
    font-weight:600; font-size:0.85rem;
    margin-bottom:0.2rem; transition:all .2s;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
    background:rgba(251,191,36,0.08); color:var(--gold);
}
.admin-main { flex:1; padding:1.5rem 2rem; }
.admin-main h1 { font-size:1.5rem; font-weight:800; margin-bottom:1.5rem; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat {
    background:rgba(20,35,45,0.5); border:1px solid rgba(255,255,255,0.04);
    border-radius:12px; padding:1.2rem;
}
.stat .num { font-size:1.8rem; font-weight:900; color:var(--gold); }
.stat .label { font-size:0.8rem; color:var(--gray); margin-top:0.2rem; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.85rem; }
table th {
    text-align:left; padding:0.7rem 1rem;
    color:var(--gray); font-weight:600; text-transform:uppercase;
    font-size:0.7rem; letter-spacing:0.5px;
    border-bottom:1px solid rgba(255,255,255,0.04);
}
table td { padding:0.7rem 1rem; border-bottom:1px solid rgba(255,255,255,0.02); color:var(--white); }
table tr:hover td { background:rgba(255,255,255,0.02); }

.badge-s { display:inline-block; padding:0.15rem 0.5rem; border-radius:50px; font-size:0.7rem; font-weight:700; }
.badge-paid { background:rgba(34,197,94,0.12); color:#86efac; }
.badge-pending { background:rgba(251,191,36,0.12); color:var(--gold); }
.badge-expired { background:rgba(239,68,68,0.12); color:#fca5a5; }

/* Admin forms */
.admin-form { max-width:600px; }
.admin-form .form-group { margin-bottom:1.2rem; }
.admin-form label { display:block; font-size:0.8rem; font-weight:600; color:var(--gray); margin-bottom:0.3rem; }
.admin-form input, .admin-form textarea, .admin-form select {
    width:100%; padding:0.65rem 0.9rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; color:var(--white); font-size:0.9rem;
}
.admin-form textarea { min-height:80px; resize:vertical; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
    outline:none; border-color:var(--gold);
}
.admin-form input[type="file"] { padding:0.4rem; }

/* Login */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-box {
    background:var(--card); border-radius:20px; padding:2.5rem;
    max-width:400px; width:100%; border:1px solid var(--border);
}
.login-box h1 { color:var(--gold); text-align:center; font-size:1.3rem; margin-bottom:1.5rem; }

/* Footer */
.footer { text-align:center; padding:2rem 0; color:var(--gray); font-size:0.8rem; border-top:1px solid rgba(255,255,255,0.03); margin-top:2rem; }

/* Utils */
.mt-1 { margin-top:1rem; }
.mb-1 { margin-bottom:1rem; }
.flex { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.text-center { text-align:center; }
.text-muted { color:var(--gray); }
.text-gold { color:var(--gold); }
.text-sm { font-size:0.85rem; }

/* Admin Cards Elegantes */
.admin-cards {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:1.2rem;
    margin-bottom:2rem;
}
.admin-card {
    background:rgba(20,35,45,0.5);
    border:1px solid var(--border);
    border-radius:16px;
    padding:1.5rem;
    transition:all .3s;
    position:relative;
    overflow:hidden;
}
.admin-card:hover {
    transform:translateY(-4px);
    border-color:var(--gold);
    box-shadow:0 12px 40px rgba(0,0,0,0.3);
}
.admin-card::before {
    content:'';
    position:absolute;
    top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--gold),var(--gold2));
    opacity:0;
    transition:opacity .3s;
}
.admin-card:hover::before { opacity:1; }
.admin-card .card-icon {
    font-size:2.2rem;
    margin-bottom:0.5rem;
}
.admin-card .card-title {
    font-size:0.75rem;
    color:var(--gray);
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:600;
    margin-bottom:0.2rem;
}
.admin-card .card-value {
    font-size:1.8rem;
    font-weight:900;
    color:var(--gold);
}
.admin-card .card-sub {
    font-size:0.8rem;
    color:var(--gray);
    margin-top:0.2rem;
}

/* Admin Stickers Grid - Elegant Cards */
.sticker-admin-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:1.2rem;
    margin-top:1.5rem;
}
.sticker-admin-card {
    background:rgba(20,35,45,0.4);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    transition:all .3s;
    position:relative;
}
.sticker-admin-card:hover {
    transform:translateY(-5px);
    border-color:var(--gold);
    box-shadow:0 12px 40px rgba(0,0,0,0.3);
}
.sticker-admin-card .flag-area {
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:4.5rem;
    background:linear-gradient(135deg, var(--green2), var(--green3));
    position:relative;
}
.sticker-admin-card .flag-area .pdf-badge {
    position:absolute;
    top:8px;right:8px;
    font-size:0.65rem;
    padding:0.2rem 0.5rem;
    border-radius:6px;
    font-weight:700;
}
.sticker-admin-card .body {
    padding:1rem 1.2rem 1.2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.sticker-admin-card .body .name {
    font-weight:700;
    font-size:0.95rem;
}
.sticker-admin-card .body .actions {
    display:flex;
    gap:0.4rem;
}

/* Admin search */
.admin-search {
    display:flex;
    gap:0.5rem;
    align-items:center;
    margin-bottom:1.5rem;
}
.admin-search input {
    flex:1;
    max-width:300px;
    padding:0.6rem 1rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    color:var(--white);
    font-size:0.9rem;
}
.admin-search input:focus { outline:none; border-color:var(--gold); }
.admin-search input::placeholder { color:rgba(148,163,184,0.4); }

/* Admin stat deltas */
.stat-delta { font-size:0.75rem; font-weight:600; }
.stat-delta.up { color:#86efac; }
.stat-delta.down { color:#fca5a5; }

/* Mini table pagination */
.pagination-info {
    font-size:0.8rem;
    color:var(--gray);
    padding:0.8rem 1rem 0;
}

/* Admin Section headers with border accent */
.admin-section-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1.5rem;
    padding-bottom:0.8rem;
    border-bottom:1px solid rgba(251,191,36,0.1);
}
.admin-section-header h2 {
    font-size:1.1rem;
    font-weight:800;
    color:var(--gold);
}

/* Admin log viewer */
.log-entry {
    padding:0.4rem 0.8rem;
    border-bottom:1px solid rgba(255,255,255,0.02);
    font-size:0.8rem;
    font-family:monospace;
    color:var(--gray);
}
.log-entry:hover { background:rgba(255,255,255,0.02); }
.log-entry .time { color:var(--gold); }

/* Button group */
.btn-group {
    display:flex;
    gap:0.4rem;
    flex-wrap:wrap;
}

/* Nav WhatsApp button */
.nav-whatsapp {
    background:rgba(34,197,94,0.12) !important;
    color:#86efac !important;
    padding:0.3rem 0.8rem !important;
    border-radius:50px !important;
    border:1px solid rgba(34,197,94,0.2);
    font-size:0.8rem !important;
}
.nav-whatsapp:hover {
    background:rgba(34,197,94,0.25) !important;
    color:#fff !important;
}

/* Responsive */
@media(max-width:768px) {
    .hero h1 { font-size:2rem; }
    .admin-wrap { flex-direction:column; }
    .admin-sidebar { width:100%; display:flex; gap:0.3rem; overflow-x:auto; padding:0.8rem; }
    .admin-sidebar a { white-space:nowrap; }
    .admin-main { padding:1rem; }
    .features { grid-template-columns:1fr; }
    .stickers-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
    .modal { padding:1.5rem; }
    .topbar .container { flex-wrap:wrap; gap:0.4rem; justify-content:center; }
    .topbar nav { width:100%; justify-content:center; flex-wrap:wrap; gap:0.6rem; }
    .logo { font-size:0.95rem; }
}

/* Floating cards background */
.float-cards {
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}
.float-card {
    position:absolute;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:0.12;
    animation:floatCard linear infinite;
    will-change:transform;
}
@keyframes floatCard {
    0% { transform:translate(0,0) rotate(0deg) scale(1); }
    25% { transform:translate(30px,-20px) rotate(5deg) scale(1.02); }
    50% { transform:translate(-20px,30px) rotate(-3deg) scale(0.98); }
    75% { transform:translate(25px,15px) rotate(4deg) scale(1.01); }
    100% { transform:translate(0,0) rotate(0deg) scale(1); }
}

/* Anti-inspect: disable selection on key elements */
.noselect { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }