:root {
  --red: #E30613;
  --red-dark: #B0050F;
  --black: #0A0A0A;
  --dark: #1A1A1A;
  --grey: #2A2A2A;
  --gold: #FFD700;
  --gold-dark: #FFC107;
  --yellow: #FFCC02;
  --orange: #FF6B00;
  --white: #FFFFFF;
  --muted: #AAAAAA;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 80px;
  overflow-x: hidden;
}
/* Animations */
@keyframes glow { 0%{box-shadow:0 0 8px var(--gold)} 50%{box-shadow:0 0 20px var(--red)} 100%{box-shadow:0 0 8px var(--gold)} }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes shine { 0%{background-position:-200px} 100%{background-position:200px} }
.fade-in { animation: slideUp 0.6s ease; }
.glow { animation: glow 2s infinite; }
/* Header */
.header {
  background: linear-gradient(180deg, #000 0%, #1A1A1A 100%);
  border-bottom: 3px solid var(--red);
  padding: 10px 16px;
  display:flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index:100;
}
.header .logo { height: 38px; filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
.header .brand { font-size: 20px; font-weight: 900; letter-spacing:1.5px; color: var(--white); text-transform: uppercase; }
.header .brand span { color: var(--red); }
.header .sub { font-size: 9px; letter-spacing:2px; color: var(--gold); margin-top:-4px; }
/* Bottom nav */
.bottom-nav {
  position: fixed; bottom:0; left:0; right:0;
  background: linear-gradient(180deg, #1A1A1A 0%, #000 100%);
  border-top: 2px solid var(--gold);
  display:flex; justify-content:space-around; align-items:center;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  z-index: 99;
}
.bottom-nav a {
  flex:1; text-align:center; text-decoration:none; color: var(--muted);
  font-size: 11px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding: 4px;
  transition: all 0.2s;
}
.bottom-nav a.active, .bottom-nav a:hover { color: var(--gold); transform: translateY(-2px); }
.bottom-nav a .icon { font-size:20px; line-height:1; }
.bottom-nav a.active .icon { filter: drop-shadow(0 0 6px var(--gold)); }
/* WhatsApp floating */
.whatsapp-float {
  position: fixed; bottom: 88px; right: 16px;
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 0 4px rgba(37,211,102,0.2);
  z-index: 98;
  animation: pulse 2s infinite;
  text-decoration:none;
  font-size: 30px;
}
.whatsapp-float:hover { transform: scale(1.1); }
/* Cards */
.card {
  background: linear-gradient(145deg, #1A1A1A 0%, #0A0A0A 100%);
  border: 1px solid #333;
  border-radius: 16px;
  padding: 16px;
  margin: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.card-gold { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,215,0,0.15); }
.btn {
  display:inline-block; padding: 10px 22px; border-radius: 10px; font-weight:800; text-align:center; cursor:pointer; border:none; text-decoration:none;
  transition: all 0.2s;
}
.btn-red { background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%); color:white; box-shadow: 0 4px 10px rgba(227,6,19,0.4); }
.btn-gold { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--black); box-shadow: 0 4px 10px rgba(255,215,0,0.3); }
.btn-ghost { background: transparent; border: 1px solid #444; color: var(--white); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.5); }
.btn:active { transform: translateY(0); }
/* Package grid */
.pkg-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:16px; padding:12px; }
.pkg-card {
  background: linear-gradient(180deg, #0A0A0A 0%, #1A0A0A 50%, #3A0A0A 100%);
  border: 2px solid var(--gold); border-radius: 18px; overflow:hidden;
  position:relative; animation: slideUp 0.5s ease;
}
.pkg-card img { width:100%; height:auto; display:block; }
.pkg-card .body { padding:12px; text-align:center; }
.invest-btn { width:100%; margin-top:8px; font-size:16px; padding:12px; }
/* Status badges */
.badge { display:inline-block; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:800; }
.badge-pending { background:#FF9800; color:white; }
.badge-approved { background:#4CAF50; color:white; }
.badge-rejected { background:var(--red); color:white; }
.badge-active { background:var(--red); color:white; }
.badge-completed { background:#555; color:white; }
/* Forms */
.input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #333; background:#0F0F0F; color:white; font-size:15px; outline:none; }
.input:focus { border-color: var(--gold); box-shadow:0 0 0 3px rgba(255,215,0,0.1); }
.label { font-size:13px; color:var(--muted); margin-bottom:6px; display:block; font-weight:600; }
.copy-row { display:flex; gap:8px; align-items:center; }
.copy-btn { background: var(--gold); color: var(--black); border:none; padding:8px 12px; border-radius:8px; font-weight:800; cursor:pointer; font-size:13px; }
.copy-btn:active { transform:scale(0.95); }
/* Welcome modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; z-index:200; padding:16px; }
.modal { background: linear-gradient(180deg, #1A1A1A 0%, #0A0A0A 100%); border: 2px solid var(--gold); border-radius:20px; max-width:420px; width:100%; padding:24px; text-align:center; animation: slideUp 0.4s ease; position:relative; }
.close-modal { position:absolute; top:12px; right:12px; background:#333; border:none; color:white; width:32px; height:32px; border-radius:50%; cursor:pointer; }
.big-whatsapp { display:block; background:#25D366; color:white; padding:16px; border-radius:14px; font-size:18px; font-weight:900; text-decoration:none; margin:16px 0; box-shadow:0 4px 14px rgba(37,211,102,0.4); }
.big-whatsapp:hover { background:#1DA851; transform:scale(1.02); }
/* Tables */
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th { background: var(--red); color:white; padding:10px 8px; text-align:left; font-size:12px; }
.table td { padding:9px 8px; border-bottom:1px solid #222; }
.table tr:hover td { background:#111; }
/* Alert */
.alert { padding:12px 16px; border-radius:10px; margin:12px; font-weight:600; font-size:14px; }
.alert-success { background: #0f3d1a; border:1px solid #4CAF50; color:#a5d6a7; }
.alert-error { background: #3d0f0f; border:1px solid var(--red); color:#ef9a9a; }
/* Balance banner */
.balance-banner { background: linear-gradient(135deg, var(--red) 0%, #8B0000 100%); padding:16px; margin:12px; border-radius:16px; text-align:center; border:1px solid var(--gold); }
.balance-banner .amount { font-size:32px; font-weight:900; color: var(--gold); text-shadow:0 2px 8px rgba(0,0,0,0.5); }
/* Responsive */
@media(max-width:480px){ .pkg-grid{grid-template-columns:1fr} }