/* ═══════════════════════════════════════
   NAVBAR — glassmorphism
═══════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav);
  background: rgba(10,10,14,0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
  transition: background 0.3s;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  justify-self: start;
}

.nav-logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #00d4ff, #7b00e0);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0,212,255,0.35);
}

.ws-title {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #00f0ff, #b060ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  font-family: 'Manrope', 'Inter', sans-serif;
}

.nav-center { display: flex; align-items: center; gap: 8px; grid-column: 2 }

/* Balance + wallet combo */
.nbc-combo {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  height: 40px;
  backdrop-filter: blur(10px);
}

.nbc-wrap { position: relative }

.nbc-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 10px;
  height: 100%;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  border-right: 1px solid rgba(255,255,255,0.08);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.nbc-trigger:hover { background: rgba(255,255,255,0.06) }

.nbc-coin {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,212,255,0.12);
  border: 1px solid rgba(0,212,255,0.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--accent);
  flex-shrink: 0;
}

.nbc-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nbc-label {
  font-size: 9px;
  color: var(--t3);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.nbc-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}

.nbc-arrow {
  font-size: 9px;
  color: var(--t3);
  transition: transform .2s;
  margin-left: 2px;
}

.nbc-wrap.open .nbc-arrow { transform: rotate(180deg) }

/* Balance dropdown */
.nbc-drop {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 220px;
  background: #0f0f16;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 10001 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(0,212,255,0.08);
  animation: fadeIn .15s ease;
}

.nbc-drop.open { display: flex !important }

.nbd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.nbd-row:hover { background: rgba(255,255,255,0.05) }

.nbd-row-active {
  background: rgba(0,212,255,0.07);
  border: 1px solid rgba(0,212,255,0.18);
}

.nbd-row-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--accent); flex-shrink: 0;
}

.nbd-row-info { flex: 1; display: flex; flex-direction: column; gap: 1px }
.nbd-row-name { font-size: 12px; font-weight: 600; color: var(--t1) }
.nbd-row-bal  { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums }
.nbd-row-code { font-size: 10px; font-weight: 700; color: var(--t3); letter-spacing: .5px }
.nbd-row-check { font-size: 11px; color: var(--accent) }

/* Deposit / wallet button */
.nav-wallet-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 100%;
  background: linear-gradient(135deg, #00d4ff, #7b00e0);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: none;
  border-radius: 0 11px 11px 0;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.nav-wallet-btn:hover {
  opacity: 0.9;
  box-shadow: 0 0 20px rgba(0,212,255,0.35);
}

.nav-wallet-lbl { font-size: 12px }

/* Right section */
.nav-r {
  display: flex; align-items: center;
  justify-content: flex-end; gap: 8px;
  grid-column: 3;
}

#navUser { display: flex; align-items: center }

.nav-user-wrap { position: relative }

.nav-user-trigger {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: var(--r);
  transition: background 0.15s;
  user-select: none;
}

.nav-user-trigger:hover { background: rgba(255,255,255,0.06) }

.nav-user-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #7b00e0);
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0,212,255,0.25);
}

.nav-av-letter { font-size: 13px; font-weight: 800; color: #fff }

.nav-av-status {
  position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px;
  background: var(--grn);
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.nav-uname {
  font-size: 13px; font-weight: 600; color: var(--t1);
  max-width: 90px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.nav-uarrow { font-size: 9px; color: var(--t3); transition: transform .2s }
.nav-user-wrap.open .nav-uarrow { transform: rotate(180deg) }

/* User dropdown */
.nav-drop {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: #0f0f16;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 6px;
  min-width: 160px; display: none;
  flex-direction: column; gap: 2px;
  z-index: 10001;
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
}

.nav-drop.open { display: flex }

.nav-drop button {
  background: none; border: none;
  color: rgba(255,255,255,.75); text-align: left;
  padding: 10px 14px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: inherit;
  display: flex; align-items: center; gap: 10px;
  width: 100%; transition: background .15s, color .15s;
}

.nav-drop button:hover { background: rgba(255,255,255,.07); color: #fff }
.nav-drop button:last-child:hover { background: rgba(255,61,107,.12); color: var(--red) }

/* Login button */
.btn-login {
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.25);
  color: var(--accent); font-weight: 700;
  padding: 9px 18px; border-radius: var(--r); font-size: 13px;
  transition: all 0.25s var(--ease);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.2px;
}

.btn-login:hover {
  background: rgba(0,212,255,0.15);
  border-color: rgba(0,212,255,0.45);
  box-shadow: 0 0 16px rgba(0,212,255,0.2);
}

.nav-center { position: relative; z-index: 1001 }

@media (max-width: 600px) {
  .nav { padding: 0 12px }
  .ws-title { display: none }
  .nav-wallet-lbl { display: none }
  .nav-wallet-btn { padding: 0 11px }
  .nav-uname, .nav-uarrow { display: none }
  .nbc-label { display: none }
  .nbc-trigger { padding: 0 9px }
}

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.side {
  position: fixed;
  top: var(--nav); left: 0; bottom: 0;
  width: var(--side);
  background: #0d0d12;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  z-index: 900;
  padding: 10px 6px;
  display: flex; flex-direction: column; gap: 1px;
  transition: transform .3s var(--ease);
}

.st {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--t3);
  padding: 12px 10px 4px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.st svg,
.st i[data-lucide] {
  width: 11px;
  height: 11px;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.si {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  color: var(--t2);
  font-size: 13px; font-weight: 600;
  position: relative;
}

.si:hover { background: rgba(255,255,255,0.05); color: var(--t1) }

.si.ac {
  background: rgba(0,212,255,0.08);
  color: var(--accent);
}

.si.ac::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: linear-gradient(to bottom, var(--cyan), var(--accent));
  border-radius: 0 3px 3px 0;
}

.si.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: all;
}

.si.disabled:hover {
  background: rgba(255,255,255,0.02);
  color: var(--t2);
}

.coming-soon-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #c300ff, #8b00cc);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(195, 0, 255, 0.3);
}

.si .ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; transition: all 0.18s;
}

.si .ic svg.lucide,
.si .ic i[data-lucide] {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.si:hover .ic { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12) }
.si.ac .ic { background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.22); color: var(--accent) }

.badge {
  margin-left: auto;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 700;
}

.badge.live { background: rgba(0,230,118,0.1); color: var(--grn); border: 1px solid rgba(0,230,118,0.22) }
.badge.new  { background: rgba(255,215,0,0.1); color: var(--gold); border: 1px solid rgba(255,215,0,0.22) }
.badge.hot  { background: rgba(255,80,0,0.12); color: #ff6030; border: 1px solid rgba(255,80,0,0.28) }

/* ═══════════════════════════════════════
   CHAT
═══════════════════════════════════════ */
.chat {
  position: fixed;
  top: var(--nav); right: 0; bottom: 0;
  width: 260px;
  background: #0d0d12;
  border-left: 1px solid rgba(255,255,255,0.06);
  z-index: 900;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease);
}

.ch-h {
  padding: 12px 14px;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--t1); flex-shrink: 0;
}

.ch-h svg,
.ch-h i[data-lucide] {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.ch-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); flex-shrink: 0 }
.ch-h .oc  { margin-left: auto; margin-right: 4px; font-size: 11px; color: var(--t3); font-weight: 400 }

.cms {
  flex: 1; overflow-y: auto;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 1px;
}

.cms::-webkit-scrollbar { width: 3px }
.cms::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px }

.ciw {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.ciw input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--t1);
  padding: 8px 10px;
  font-size: 12px;
  transition: border-color .2s;
}

.ciw input:focus { border-color: rgba(0,212,255,0.35) }
.ciw input::placeholder { color: var(--t3) }

.ciw button {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 12px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}

.ciw button:hover { opacity: 0.85 }

/* ═══════════════════════════════════════
   MAIN
═══════════════════════════════════════ */
.main {
  margin-left: var(--side);
  margin-right: 260px;
  margin-top: var(--nav);
  padding: 20px 24px;
  min-height: calc(100vh - var(--nav));
  position: relative;
}

.pg, .gp {
  display: none;
  animation: pgIn .25s ease both;
}

.pg.ac, .gp.ac { display: block }

#sov, #cov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 1050;
}

#sov.on, #cov.on { display: block }

@media (max-width: 1024px) {
  .side { transform: translateX(-100%); z-index: 1100 }
  .side.open { transform: translateX(0) }
  .chat { transform: translateX(100%); z-index: 1100 }
  .chat.open { transform: translateX(0) }
  .main { margin-left: 0; margin-right: 0 }
}

@media (max-width: 768px) {
  .side {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer {
  background: rgba(10,10,14,0.85);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-left: var(--side);
  margin-right: 260px;
  padding: 24px 24px 16px;
  margin-top: 40px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 16px;
  background: linear-gradient(135deg, #00f0ff, #b060ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2px;
}

.footer-logo i {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #00d4ff, #7b00e0);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 0 12px rgba(0,212,255,0.3);
}

.footer-desc {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.5;
  margin-bottom: 4px;
}

.footer-copyright {
  font-size: 11px;
  color: var(--t3);
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 2px;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t2);
  text-decoration: none;
  transition: all 0.2s;
  padding: 4px 0;
}

.footer-link i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.footer-link:hover {
  color: var(--accent);
  transform: translateX(3px);
}

.footer-link:hover i {
  opacity: 1;
}

@media (max-width: 1024px) {
  .site-footer {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer {
    padding: 20px 20px 14px;
  }
}

.footer-warning {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(255,193,7,0.1);
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.footer-warning i {
  width: 20px;
  height: 20px;
  color: #ffc107;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-warning span {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,193,7,0.95);
}

.footer-warning strong {
  color: #ffc107;
  font-weight: 700;
}

@media (max-width: 768px) {
  .footer-warning {
    padding: 12px 14px;
    gap: 10px;
  }

  .footer-warning i {
    width: 18px;
    height: 18px;
  }

  .footer-warning span {
    font-size: 11px;
  }
}