:root {
  --tb-navy: #071526;
  --tb-navy-2: #0b1f3a;
  --tb-navy-3: #12385f;
  --tb-silver: #d8dee8;
  --tb-silver-2: #aeb8c6;
  --tb-white: #ffffff;
  --tb-border: rgba(216, 222, 232, 0.38);
}

body {
  background:
    radial-gradient(circle at top, rgba(216,222,232,0.16), transparent 28%),
    linear-gradient(135deg, #eef3f8, #d8dee8);
  font-family: 'Segoe UI', sans-serif;
  color: #0b1f3a;
}

body.dark-mode {
  background:
    radial-gradient(circle at top, rgba(216,222,232,0.13), transparent 30%),
    linear-gradient(135deg, #030914, #071526, #0b1f3a);
  color: #ffffff;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 22px;
  margin: 14px auto 18px;
  width: 94%;
  max-width: 1280px;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04)),
    linear-gradient(135deg, #0b1f3a, #102f55 55%, #08182d);

  border: 1px solid var(--tb-border);
  border-bottom: 3px solid rgba(216,222,232,0.55);

  border-radius: 10px 28px 10px 28px;

  box-shadow:
    0 16px 35px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
  z-index: 1000;
  gap: 12px;
}

/* الشعار */
.logo {
  height: 44px;
  max-width: 105px;
  object-fit: contain;

  order: 4;
  margin-left: 10px;

  border-radius: 14px 6px 14px 6px;
  padding: 3px;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(216,222,232,0.35);

  box-shadow:
    0 0 0 3px rgba(216,222,232,0.08),
    0 8px 16px rgba(0,0,0,0.22);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.logo:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 0 0 3px rgba(216,222,232,0.16),
    0 10px 22px rgba(0,0,0,0.32);
}

/* زر القائمة */
.menu-toggle {
  order: 1;
  margin-right: auto;

  width: 46px;
  height: 40px;

  background:
    linear-gradient(145deg, #d8dee8, #8f9baa);

  color: #071526;
  border: 1px solid rgba(255,255,255,0.45);

  border-radius: 14px 6px 14px 6px;

  font-size: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 8px 16px rgba(0,0,0,0.25);

  transition: transform 0.25s ease, filter 0.25s ease;
}

.menu-toggle:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.menu-toggle i {
  color: #071526 !important;
}

/* VIP */
.vip-badge {
  order: 2;
  margin-left: 10px;
}

.vip-badge img {
  height: 42px !important;
  width: 42px !important;
  object-fit: cover;

  border-radius: 12px 5px 12px 5px !important;

  border: 1px solid rgba(216,222,232,0.55);

  box-shadow:
    0 0 12px rgba(216,222,232,0.45),
    0 8px 14px rgba(0,0,0,0.28) !important;

  transition: transform 0.25s ease;
}

.vip-badge img:hover {
  transform: scale(1.08) rotate(-2deg);
}

/* الرصيد */
.balance-section {
  order: 3;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 18px;

  background:
    linear-gradient(145deg, rgba(216,222,232,0.26), rgba(255,255,255,0.07));

  border: 1px solid rgba(216,222,232,0.42);
  border-radius: 8px 22px 8px 22px;

  cursor: pointer;
  color: #ffffff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 18px rgba(0,0,0,0.22);

  transition: transform 0.22s ease, background 0.22s ease;
}

.balance-section:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(145deg, rgba(216,222,232,0.36), rgba(255,255,255,0.12));
}

.balance-amount {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  margin-left: auto;
}

.balance-currency {
  color: #d8dee8;
  font-weight: 900;
  font-size: 13px;
}

.balance-section i {
  font-size: 14px;
  color: #d8dee8;
}

/* النهاري: التوب بار يبقى فخم وواضح */
body:not(.dark-mode) .top-bar {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.06)),
    linear-gradient(135deg, #102f55, #0b1f3a 65%, #071526);
}

/* الجوال */
@media (max-width: 600px) {
  .top-bar {
    width: 94%;
    padding: 12px 14px;
    margin-top: 12px;
    border-radius: 8px 22px 8px 22px;
    gap: 8px;
  }

  .logo {
    height: 36px;
    max-width: 95px;
  }

  .menu-toggle {
    width: 42px;
    height: 38px;
  }

  .balance-section {
    padding: 8px 12px;
    gap: 6px;
  }

  .balance-amount {
    font-size: 13px;
  }

  .balance-currency {
    font-size: 12px;
  }
}