/* меню логотипа DOTON для отдельных страниц (market, developers) — копия из dex.css */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 18px; }
.brand-wrap { position: relative; --muted: #8b8f9c; font-family: Inter, system-ui, sans-serif; line-height: 1.4; }
.brand {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-left: -8px; border-radius: 12px;
  background: none; border: 0; color: #fff; cursor: pointer; font: 800 22px SF Pro Display, -apple-system, BlinkMacSystemFont, Inter Tight, sans-serif; letter-spacing: -.01em;
  transition: background .2s;
}
.brand:hover, .brand[aria-expanded="true"] { background: rgba(255,255,255,.08); }
.brand .caret { width: 12px; height: 12px; opacity: .7; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.brand[aria-expanded="true"] .caret { transform: rotate(180deg); }
.brand-menu {
  position: absolute; top: calc(100% + 10px); left: -8px; width: 330px; padding: 14px;
  background: #16171b; border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
  transform-origin: top left;
  /* мягкое появление и исчезновение: прозрачность + лёгкий сдвиг и масштаб */
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); filter: blur(2px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease, visibility 0s .45s;
}
.brand-menu.open {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .35s ease, visibility 0s;
}
/* пункты появляются друг за другом */
.brand-menu > * { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.brand-menu.open > * { opacity: 1; transform: none; }
.brand-menu.open > :nth-child(2) { transition-delay: .04s; } .brand-menu.open > :nth-child(3) { transition-delay: .08s; }
.brand-menu.open > :nth-child(4) { transition-delay: .12s; } .brand-menu.open > :nth-child(5) { transition-delay: .16s; }
.brand-menu.open > :nth-child(6) { transition-delay: .2s; }
.bm-label { font: 600 12px Inter, sans-serif; color: var(--muted); margin: 2px 8px 8px; }
.bm-item { display: flex; gap: 12px; align-items: center; padding: 9px 8px; border-radius: 14px; transition: background .15s; }
.bm-item:hover { background: rgba(255,255,255,.06); }
.bm-item i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.07); color: #c9cbd3; transition: background .15s, color .15s; }
.bm-item:hover i, .bm-item.current i { background: rgba(255,255,255,.12); color: #fff; }
.bm-item i svg { width: 20px; height: 20px; }
.bm-item span { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.bm-item b { font: 700 14px Inter, sans-serif; color: #fff; display: flex; align-items: center; gap: 8px; }
.bm-item em { font: 600 10px Inter, sans-serif; font-style: normal; color: #3db5ff; background: rgba(0,152,234,.14); padding: 2px 7px; border-radius: 999px; }
.bm-sections { display: none; }
.bm-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); }
.bm-foot span { font: 600 12px Inter, sans-serif; color: var(--muted); margin-right: auto; }
.bm-foot a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #c9cbd3; transition: background .15s, color .15s; }
.bm-foot a:hover { background: rgba(255,255,255,.08); color: #fff; }
.bm-foot svg { width: 18px; height: 18px; }

.brand-menu { z-index: 60; }
.bm-item.current { background: rgba(255,255,255,.05); }
.brand-menu .bm-item { color: inherit; text-decoration: none; }
@media (max-width: 860px) { .brand-menu { width: min(330px, calc(100vw - 24px)); } }
.brand-menu > :nth-child(7) { transition-delay: .24s; }
.tg-app .top { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 14px); }
.top { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 14px); }

/* отдельные страницы (Market, API): страница не уезжает вбок при свайпе пальцем */
html, body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
body { position: relative; width: 100%; }

/* шапка с подложкой цвета страницы, плавно уходящей вниз: под кнопками Telegram не просвечивает фон */
/* подложка только на телефоне — на компьютере шапка прозрачная */
.top { --hdr: #131316; }
@media (max-width: 860px) { .top { background: linear-gradient(to bottom, var(--hdr) 0%, var(--hdr) 72%, transparent 100%); } }
body:has(#rain) .top { --hdr: #0a0a0c; }
[data-theme="light"] .top, [data-theme="light"] body:has(#rain) .top { --hdr: #f3f4f7; }

/* Фон под страницей при оттягивании (Market / API). Раньше у html не было цвета в тёмной теме —
   при оттягивании проступал белый, и под шапкой появлялась светлая полоса. */
html { background: #131316; }
html:has(#rain) { background: #0a0a0c; }
html[data-theme="light"], html[data-theme="light"]:has(#rain) { background: #f3f4f7; }
body::before { content: ''; position: fixed; left: 0; right: 0; top: -60vh; bottom: -60vh; z-index: -1; background: inherit; pointer-events: none; }


/* ===== Market: фон как в DEX — пятна из радиальных градиентов (без blur-фильтра, iOS его обрезал),
   первое большое пятно уходит за левый верхний угол; шапка без подложки, как в DEX ===== */
body:has(.ring) .blob { filter: none !important; animation: drift 18s ease-in-out infinite alternate; }
body:has(.ring) .blob.b { animation-duration: 22s; animation-direction: alternate-reverse; }
body:has(.ring) .blob.c { animation-duration: 26s; }
body:has(.ring) .blob.a { width: 60vmax !important; height: 60vmax !important; top: -28vmax !important; left: -18vmax !important; right: auto !important; bottom: auto !important;
  background: radial-gradient(closest-side, rgba(170,172,182,.55), rgba(170,172,182,0)) !important; opacity: .5; }
body:has(.ring) .blob.b { width: 55vmax !important; height: 55vmax !important; bottom: -30vmax !important; right: -20vmax !important; left: auto !important; top: auto !important;
  background: radial-gradient(closest-side, rgba(120,122,134,.6), rgba(120,122,134,0)) !important; opacity: .5; }
body:has(.ring) .blob.c { width: 30vmax !important; height: 30vmax !important; top: 12% !important; left: 58% !important;
  background: radial-gradient(closest-side, rgba(220,222,230,.3), rgba(220,222,230,0)) !important; opacity: .4; }
[data-theme="light"] body:has(.ring) .blob.a { background: radial-gradient(closest-side, rgba(125,131,143,.55), rgba(125,131,143,0)) !important; opacity: .8; }
[data-theme="light"] body:has(.ring) .blob.b { background: radial-gradient(closest-side, rgba(150,155,165,.6), rgba(150,155,165,0)) !important; opacity: .8; }
[data-theme="light"] body:has(.ring) .blob.c { background: radial-gradient(closest-side, rgba(115,121,133,.4), rgba(115,121,133,0)) !important; opacity: .6; }
@media (max-width: 860px) { body:has(.ring) .top, body:has(#rain) .top { background: none; } }

/* логотип Doton рядом со словом */
.brand .brand-logo { width: 28px; height: 28px; flex: none; display: block; margin-right: 2px; }
@media (max-width: 700px) { .brand .brand-logo { width: 26px; height: 26px; } }

/* логотип — четыре квадратика цвета текста, без подложки */
.brand .brand-logo { width: 22px; height: 22px; margin-right: 4px; color: currentColor; }
@media (max-width: 700px) { .brand .brand-logo { width: 20px; height: 20px; } }

/* меню логотипа: зазор между пунктами, подсветки не слипаются */
.bm-item + .bm-item { margin-top: 4px; }

/* полоса прокрутки страницы: тонкая, без стрелок, под цвет темы */
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
html[data-theme="light"] { scrollbar-color: rgba(0,0,0,.18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.16); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.28); }
::-webkit-scrollbar-button { display: none; }

/* полоса прокрутки страницы скрыта совсем (прокрутка работает как обычно); нажатия без серой вспышки iOS */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { -webkit-tap-highlight-color: transparent; }