:root {
  --bg:#0b0b0b;
  --card:#171717;
  --text:#fff;
  --muted:#aaa;
  --accent:#2ecc71;
  --radius:16px;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
}

body {
  background:var(--bg);
  color:var(--text);
  padding-bottom:80px;
}

.top-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.logo {
  width:36px;
  height:36px;
  border-radius:12px;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#000;
}

.header-actions {
  display:flex;
  gap:10px;
}

.btn-deposit {
  background:rgba(46,204,113,.2);
  border:none;
  color:var(--accent);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
}

.icon-btn {
  background:rgba(255,255,255,.08);
  border:none;
  color:#fff;
  width:36px;
  height:36px;
  border-radius:50%;
}

.carousel {
  padding:16px;
}

.carousel-track {
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.carousel-track {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE / Edge */
}

.carousel-track::-webkit-scrollbar {
  display: none;                   /* Chrome / Safari */
}

.carousel-slide {
  min-width:100%;
  scroll-snap-align:center;
}

.promo {
  background:var(--card);
  padding:16px;
  border-radius:var(--radius);
}

.promo-tag {
  font-size:11px;
  color:var(--accent);
  font-weight:700;
}

.promo-kicker {
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.promo h2 {
  font-size:20px;
  margin:8px 0;
}

.promo-sub {
  font-size:13px;
  color:#ccc;
}

.promo-actions {
  display:flex;
  gap:10px;
  margin-top:12px;
}

.btn-primary {
  background:var(--accent);
  color:#000;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
}

.btn-outline {
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
}

.carousel-dots {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.carousel-dots button {
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:#444;
}

.carousel-dots button.active {
  background:var(--accent);
}

.bottom-nav {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-around;
  padding:12px;
  background:#0d0d0d;
  border-top:1px solid rgba(255,255,255,.1);
}

.nav-item {
  font-size:11px;
  color:#aaa;
}

.nav-item.active {
  color:var(--accent);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: #0d0d0d;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9a9a9a;
  text-decoration: none;
}

.nav-item .nav-icon {
  font-size: 20px;
}

.nav-item.active {
  color: var(--accent);
}

.page-content {
  padding: 16px;
}

.page-content h1 {
  font-size: 22px;
  margin-bottom: 8px;
}