/* ============================================================
   BomberBlast PRO - Estilo Cyberpunk
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cyan:#00f0ff; --red:#ff3c3c; --yellow:#ffe600; --orange:#ff7b00;
  --bg:#04060c; --panel:#0a0e1a; --panel2:#0e1424; --border:#00f0ff22;
  --txt:#fff; --txt-dim:#888; --txt-faint:#444;
}
html,body{min-height:100vh}
body{
  background:var(--bg); font-family:'Orbitron',sans-serif; color:var(--txt);
  user-select:none; -webkit-tap-highlight-color:transparent;
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);
}

a{color:var(--cyan);text-decoration:none}
a:hover{text-shadow:0 0 8px var(--cyan)}

/* HEADER */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 26px;background:var(--panel);border-bottom:1px solid var(--border);
}
.brand{font-size:14px;font-weight:900;letter-spacing:3px;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.topbar-nav{display:flex;gap:14px;align-items:center;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px}
.topbar-nav a{color:var(--txt-dim);padding:6px 10px}
.topbar-nav a:hover, .topbar-nav a.active{color:var(--cyan)}
.creditos-pill{background:var(--panel2);border:1px solid #ffe60044;padding:6px 12px;border-radius:2px;color:var(--yellow);font-family:'Share Tech Mono',monospace;font-size:12px}

/* CONTAINERS */
.container{max-width:980px;margin:30px auto;padding:0 20px}
.container-narrow{max-width:540px;margin:40px auto;padding:0 20px}

.card{
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:30px; box-shadow:0 0 40px #00f0ff0a;
}
.card-title{font-size:18px;letter-spacing:4px;color:var(--cyan);text-shadow:0 0 12px var(--cyan);margin-bottom:6px}
.card-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--txt-faint);margin-bottom:24px}

/* FORMS */
.field{margin-bottom:14px}
.field label{display:block;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--txt-dim);margin-bottom:6px}
.input{
  width:100%;padding:11px 14px;background:var(--panel2);
  border:1px solid var(--border);border-radius:2px;
  font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--cyan);
  letter-spacing:1px;outline:none;transition:all .2s;
}
.input:focus{border-color:var(--cyan);box-shadow:0 0 16px #00f0ff33}
.input::placeholder{color:#333}
textarea.input{font-family:'Share Tech Mono',monospace;resize:vertical;min-height:80px}
select.input{cursor:pointer}

/* BUTTONS */
.btn{
  padding:11px 26px;border:1px solid var(--cyan);border-radius:2px;
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;
  background:transparent;color:var(--cyan);cursor:pointer;transition:all .2s;
  text-transform:uppercase;display:inline-block;text-align:center;
}
.btn:hover{background:var(--cyan);color:#000;box-shadow:0 0 24px var(--cyan)}
.btn.primary{background:var(--cyan);color:#000;box-shadow:0 0 20px #00f0ff77}
.btn.primary:hover{box-shadow:0 0 40px var(--cyan)}
.btn.yellow{border-color:var(--yellow);color:var(--yellow)}
.btn.yellow:hover{background:var(--yellow);color:#000;box-shadow:0 0 24px var(--yellow)}
.btn.red{border-color:var(--red);color:var(--red)}
.btn.red:hover{background:var(--red);color:#000;box-shadow:0 0 24px var(--red)}
.btn.sm{padding:7px 14px;font-size:10px;letter-spacing:2px}
.btn-block{display:block;width:100%}

/* MENSAGENS */
.flash{padding:12px 18px;border-radius:2px;margin-bottom:18px;font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1px}
.flash.ok{background:#0a2a1a;border:1px solid #00ff8844;color:#7fffaa}
.flash.erro{background:#2a0a0a;border:1px solid #ff3c3c66;color:#ffaaaa}
.flash.info{background:#0a1a2a;border:1px solid var(--border);color:var(--cyan)}
.erro-inline{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--red);min-height:16px;margin-bottom:10px;letter-spacing:1px}

/* LOJA - CARDS DE PACOTES */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.pack{
  background:var(--panel2);border:1px solid var(--border);border-radius:4px;
  padding:20px;text-align:center;transition:all .2s;position:relative;
}
.pack:hover{border-color:var(--yellow);box-shadow:0 0 30px #ffe60022;transform:translateY(-3px)}
.pack.destaque{border-color:var(--yellow);box-shadow:0 0 30px #ffe60033}
.pack.destaque::before{
  content:'POPULAR';position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--yellow);color:#000;padding:3px 12px;font-size:9px;letter-spacing:2px;border-radius:2px;font-weight:900;
}
.pack-nome{font-size:13px;letter-spacing:3px;color:var(--cyan);margin-bottom:10px}
.pack-creditos{font-size:38px;font-weight:900;color:var(--yellow);text-shadow:0 0 16px var(--yellow);margin:8px 0}
.pack-creditos small{display:block;font-size:11px;letter-spacing:3px;color:var(--txt-faint);font-weight:400}
.pack-preco{font-family:'Share Tech Mono',monospace;font-size:18px;color:#fff;margin:14px 0}

/* HUD-ESQUE */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:20px 0}
.stat-box{background:var(--panel2);border:1px solid var(--border);padding:14px;border-radius:2px}
.stat-label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--txt-faint);margin-bottom:6px}
.stat-value{font-size:22px;font-weight:700;color:var(--cyan)}
.stat-value.yellow{color:var(--yellow)}
.stat-value.red{color:var(--red)}

/* TÍTULO HERO */
.hero-title{font-size:44px;font-weight:900;letter-spacing:8px;color:var(--cyan);text-shadow:0 0 24px var(--cyan),0 0 60px #00f0ff44;text-align:center;margin:30px 0 6px;animation:pulse 2.4s ease-in-out infinite}
.hero-sub{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:5px;color:var(--txt-faint);text-align:center;margin-bottom:30px}
@keyframes pulse{0%,100%{text-shadow:0 0 24px var(--cyan),0 0 60px #00f0ff44}50%{text-shadow:0 0 40px var(--cyan),0 0 90px #00f0ff66}}

/* TABELAS */
.tabela{width:100%;border-collapse:collapse;font-family:'Share Tech Mono',monospace;font-size:12px}
.tabela th, .tabela td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
.tabela th{background:var(--panel2);color:var(--cyan);letter-spacing:2px;font-weight:400;font-size:10px;text-transform:uppercase}
.tabela tr:hover td{background:#0e1530}
.tabela td.acoes{text-align:right;white-space:nowrap}
.badge{display:inline-block;padding:2px 8px;border-radius:2px;font-size:9px;letter-spacing:1px}
.badge.ok{background:#0a2a1a;color:#7fffaa;border:1px solid #00ff8844}
.badge.warn{background:#2a1a0a;color:var(--yellow);border:1px solid #ffe60044}
.badge.bad{background:#2a0a0a;color:#ffaaaa;border:1px solid #ff3c3c66}

/* RESPONSIVO */
@media (max-width:600px){
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .hero-title{font-size:30px;letter-spacing:5px}
  .card{padding:20px}
  .container{margin:14px auto}
}