:root {
  --bg: #212121;
  --card: #323232;
  --primary: #0D7377;
  --highlight: #14FFEC;
  --text: #EEEEEE;
}
* { font-family: 'Poppins', sans-serif; }
body { background: radial-gradient(circle at top right, #0d737733 0%, transparent 35%), var(--bg); color: var(--text); min-height: 100vh; }
a { color: var(--highlight); }
h1,h2,h3,h4,h5,.navbar-brand,.btn { font-family: 'Rajdhani', sans-serif; letter-spacing: .4px; }
.app-navbar { background: rgba(33,33,33,.88); border-bottom: 1px solid #2f2f2f; backdrop-filter: blur(8px); }
.nav-link { border-radius: .5rem; transition: all .2s ease; padding: .4rem .75rem !important; color: var(--text) !important; }
.nav-link:hover, .nav-link.active { background: var(--primary); color: var(--highlight) !important; }
.card, .form-control, .form-select, .table { background: linear-gradient(160deg, #373737, #2f2f2f); color: var(--text); border-color: #454545; border-radius: 1rem; }
.card { transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(20,255,236,.16); }
.btn-primary { border: none; background: var(--primary); color: var(--text); border-radius: .8rem; }
.btn-primary:hover { background: var(--highlight); color: #111; transform: scale(1.04); }
.hero { background: linear-gradient(145deg,#1f1f1f,#242424); border: 1px solid #333; border-radius: 1rem; }
.badge-accent { background: var(--highlight); color: #111; font-weight: 700; }
.stadium-img { width: 100%; height: 170px; object-fit: cover; border-radius: .8rem; border: 1px solid #3f3f3f; margin-bottom: .75rem; }
.alert { border: none; border-radius: .8rem; }
.alert-danger { background: #c0392b50; color: #ffd7d1; }
.alert-success { background: #27ae6050; color: #d9ffe8; }
.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around;
  background: #1e1e1e; border-top: 1px solid #3a3a3a; padding: .4rem .5rem .6rem; z-index: 1040;
}
.mob-link { color: var(--text); text-decoration: none; font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.mob-link i { font-size: 1.1rem; }
.mob-link.active { color: var(--highlight); }
.mob-link.home {
  background: var(--primary); padding: .3rem .7rem; border-radius: 999px; transform: translateY(-14px);
  box-shadow: 0 8px 20px rgba(20,255,236,.2);
}
.mob-link.home.active { background: var(--highlight); color: #111; }
.main-space { padding-bottom: 90px; }
@media (min-width: 992px) { .main-space { padding-bottom: 1.5rem; } }