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

:root {
  --blue: #00d4ff;
  --pink: #ff006e;
  --dark: #050510;
  --dark2: #0a0a2e;
  --card: rgba(0,212,255,0.05);
  --border: rgba(0,212,255,0.2);
  --glow-blue: 0 0 20px rgba(0,212,255,0.5);
  --glow-pink: 0 0 20px rgba(255,0,110,0.5);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background: var(--dark); color: #e0f7ff; font-family: 'Rajdhani', sans-serif; min-height:100vh; overflow-x:hidden; }

body::before {
  content:''; position:fixed; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(ellipse at 20% 50%, rgba(0,212,255,0.05) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(255,0,110,0.05) 0%, transparent 50%);
  pointer-events:none; z-index:0;
}

body::after {
  content:''; position:fixed; top:0; left:0; width:100%; height:100%;
  background-image: linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events:none; z-index:0;
}

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

.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(5,5,16,0.9); backdrop-filter:blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 15px 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.navbar-brand {
  font-family:'Orbitron',sans-serif; font-size:1.5rem; font-weight:900;
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:3px;
}
.navbar-brand span { color: var(--pink); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px;
  backdrop-filter: blur(10px);
  position:relative; overflow:hidden;
  transition: all 0.3s ease;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}
.card:hover { border-color: rgba(0,212,255,0.4); box-shadow: var(--glow-blue); }

.btn {
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:1rem;
  padding: 12px 28px; border-radius:8px; border:none; cursor:pointer;
  transition: all 0.3s ease; position:relative; overflow:hidden;
  text-transform:uppercase; letter-spacing:2px;
}
.btn::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}
.btn:hover::before { left:100%; }
.btn-primary { background: linear-gradient(135deg, var(--blue), #0088ff); color:#000; box-shadow: var(--glow-blue); }
.btn-primary:hover { transform:translateY(-2px); box-shadow: 0 0 30px rgba(0,212,255,0.7); }
.btn-pink { background: linear-gradient(135deg, var(--pink), #aa0044); color:#fff; box-shadow: var(--glow-pink); }
.btn-pink:hover { transform:translateY(-2px); box-shadow: 0 0 30px rgba(255,0,110,0.7); }
.btn-outline { background:transparent; border: 1px solid var(--blue); color:var(--blue); }
.btn-outline:hover { background: rgba(0,212,255,0.1); box-shadow: var(--glow-blue); }
.btn:disabled { opacity:0.3; cursor:not-allowed; transform:none !important; }

.input-group { margin-bottom:20px; }
.input-group label { display:block; margin-bottom:8px; color:var(--blue); font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; }
.input-wrap { display:flex; align-items:center; border: 1px solid var(--border); border-radius:8px; overflow:hidden; background:rgba(0,0,0,0.3); transition: border-color 0.3s; }
.input-wrap:focus-within { border-color: var(--blue); box-shadow: var(--glow-blue); }
.input-prefix { padding:12px 15px; background:rgba(0,212,255,0.1); color:var(--blue); font-weight:600; border-right: 1px solid var(--border); white-space:nowrap; }
.input-wrap input { flex:1; background:transparent; border:none; color:#e0f7ff; padding:12px 15px; font-family:'Rajdhani',sans-serif; font-size:1rem; outline:none; }
.input-wrap input::placeholder { color:rgba(224,247,255,0.3); }

.page-title { font-family:'Orbitron',sans-serif; font-size:2rem; font-weight:900; margin-bottom:10px; background: linear-gradient(90deg, var(--blue), var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.page-subtitle { color:rgba(224,247,255,0.6); margin-bottom:40px; font-size:1.1rem; }

.qty-btns { display:flex; gap:10px; margin:20px 0; flex-wrap:wrap; }
.qty-btn {
  width:60px; height:60px; border-radius:50%; border: 2px solid var(--blue);
  background:transparent; color:var(--blue); font-size:1.5rem; font-weight:700;
  cursor:pointer; transition: all 0.3s; font-family:'Orbitron',sans-serif;
}
.qty-btn:hover:not(:disabled) { background:var(--blue); color:#000; box-shadow: var(--glow-blue); transform:scale(1.1); }
.qty-btn.active { background:var(--blue); color:#000; box-shadow: var(--glow-blue); }
.qty-btn:disabled { border-color: rgba(255,255,255,0.1); color:rgba(255,255,255,0.1); cursor:not-allowed; }

.ticket-preview {
  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(255,0,110,0.1));
  border: 1px solid var(--border); border-radius:12px; padding:20px;
  margin:15px 0; font-family:'Orbitron',sans-serif; font-size:0.8rem;
  letter-spacing:1px; cursor:pointer; transition: all 0.3s;
  position:relative;
}
.ticket-preview:hover { border-color:var(--blue); box-shadow: var(--glow-blue); }
.ticket-preview .copy-hint { position:absolute; top:8px; right:12px; font-size:0.7rem; color:var(--pink); opacity:0.7; }
.ticket-number { font-size:1.4rem; font-weight:900; color:var(--pink); margin-bottom:5px; }

.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:12px; text-align:left; border-bottom: 1px solid var(--border); color:var(--blue); font-family:'Orbitron',sans-serif; font-size:0.75rem; text-transform:uppercase; }
.data-table td { padding:12px; border-bottom: 1px solid rgba(0,212,255,0.05); }
.data-table tr:hover td { background:rgba(0,212,255,0.03); }

.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; }
.badge-blue { background:rgba(0,212,255,0.2); color:var(--blue); border: 1px solid rgba(0,212,255,0.3); }
.badge-pink { background:rgba(255,0,110,0.2); color:var(--pink); border: 1px solid rgba(255,0,110,0.3); }
.badge-green { background:rgba(0,255,128,0.2); color:#00ff80; border: 1px solid rgba(0,255,128,0.3); }

.glow-blue { text-shadow: 0 0 10px var(--blue); color:var(--blue); }
.glow-pink { text-shadow: 0 0 10px var(--pink); color:var(--pink); }

@keyframes scanline { 0%{top:-10%} 100%{top:110%} }
.scanline { position:fixed; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(0,212,255,0.4),transparent); animation:scanline 4s linear infinite; pointer-events:none; z-index:9999; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.pulse { animation: pulse 2s ease-in-out infinite; }

.alert { padding:15px 20px; border-radius:8px; margin:15px 0; font-size:0.95rem; }
.alert-success { background:rgba(0,255,128,0.1); border: 1px solid rgba(0,255,128,0.3); color:#00ff80; }
.alert-error { background:rgba(255,0,110,0.1); border: 1px solid rgba(255,0,110,0.3); color:var(--pink); }
.alert-info { background:rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3); color:var(--blue); }

.btn-discord {
  background: linear-gradient(135deg, #5865F2, #404EED);
  color:#fff; display:flex; align-items:center; gap:12px;
  font-size:1.1rem; padding:16px 32px;
  box-shadow: 0 0 20px rgba(88,101,242,0.5);
}
.btn-discord:hover { box-shadow: 0 0 30px rgba(88,101,242,0.8); transform:translateY(-2px); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
@media(max-width:768px) { .grid-2,.grid-3 { grid-template-columns:1fr; } }

.tabs { display:flex; gap:5px; margin-bottom:30px; border-bottom: 1px solid var(--border); }
.tab { padding:12px 24px; background:transparent; border:none; color:rgba(224,247,255,0.5); cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; border-bottom: 2px solid transparent; transition: all 0.3s; }
.tab.active { color:var(--blue); border-bottom-color:var(--blue); text-shadow: 0 0 10px var(--blue); }
.tab:hover { color:var(--blue); }
.tab-content { display:none; }
.tab-content.active { display:block; }

.stat-card { text-align:center; }
.stat-value { font-family:'Orbitron',sans-serif; font-size:2.5rem; font-weight:900; color:var(--blue); text-shadow: 0 0 20px var(--blue); }
.stat-label { color:rgba(224,247,255,0.5); text-transform:uppercase; letter-spacing:2px; font-size:0.8rem; margin-top:5px; }

.mt-20 { margin-top:20px; }
.mb-20 { margin-bottom:20px; }
.text-center { text-align:center; }
.flex { display:flex; }
.gap-10 { gap:10px; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }