/* ===== Theme variables ===== */
:root{
  --bg: #0F0D17;
  --bg-grad-1: #1C1630;
  --bg-grad-2: #0F0D17;
  --text: #EAE7F7;
  --muted: #B7B2CB;

  --brand-start:#9B6DFF;
  --brand-end:#7A4BFF;

  --card:#FFFFFF;
  --stroke:#E9E4FF;

  --radius-xl: 20px;
  --radius-lg: 14px;

  --shadow-soft: 0 24px 60px rgba(123, 75, 255, .25);
  --shadow-card: 0 12px 28px rgba(17, 12, 28, .22);

  /* белые полоски для иконки бургера (Bootstrap переменная) */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.92)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ===== Base ===== */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% -200px, #3B2B63 0%, transparent 70%) no-repeat,
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Topbar ===== */
.topbar{
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(180deg, rgba(35,27,58,.75), rgba(20,16,33,.6));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* brand */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand__logo{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center; font-weight:900; letter-spacing:.2px;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color:#fff;
  box-shadow: 0 10px 26px rgba(123,75,255,.45);
}
.brand__name{ font-weight:800; font-size:1.1rem; }

/* nav */
.nav{ display:flex; gap:14px; align-items:center; }
.nav__link{
  color:#EDEBFA !important; text-decoration:none; padding:6px 10px; border-radius:10px;
  transition: background .15s ease, color .15s ease;
}
.nav__link:hover{ background: rgba(255,255,255,.08); color:#fff !important; }

/* right side */
.topbar__right{ display:flex; align-items:center; gap:10px; }
.topbar__user{ color: var(--muted); font-size:.92rem; }
.topbar__select{
  padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color:#fff;
}

/* buttons */
.btn{ border-radius:12px; padding:8px 12px; text-decoration:none; border:1px solid transparent; font-weight:600; }
.btn--ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover{ background: rgba(255,255,255,.08); }
.btn--primary{
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color:#fff; box-shadow: 0 8px 22px rgba(123,75,255,.45);
}
.btn--primary:hover{ filter: brightness(1.05); }

/* burger */
.navbar-toggler{
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  padding: .4rem .55rem;
}
.navbar-toggler:hover{ background: rgba(255,255,255,.14); }
.navbar-toggler .navbar-toggler-icon{
  background-image: var(--bs-navbar-toggler-icon-bg) !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:22px 22px !important;
}

/* ===== Mobile menu (sheet) ===== */
.mobile-menu{
  background: rgba(22,18,36,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.mobile-menu__inner{
  max-width: 1200px; margin: 0 auto; padding: 12px 16px 16px;
}
#mobileMenu .nav__link{
  display:block; margi