/* ═══ Каркас: верхняя панель, вкладки, меню профиля ═══════════════════ */

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 max(var(--gutter), env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.78));
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}
/* Нижняя кромка панели — тонкая перламутровая линия, а не серая черта. */
.topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 208, 238, 0.3) 20%, rgba(204, 228, 228, 0.28) 50%, rgba(236, 224, 208, 0.26) 80%, transparent);
    opacity: 0.6;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 6px 8px 6px 0;
    border-radius: 12px;
}
.brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    transition: transform var(--dur-3) var(--ease-spring);
}
.brand:hover .brand-mark { transform: translateY(-1px) scale(1.07); }

/* Знак в 3D (js/core/icons.js brandMark, владелец 26.09): трёхгранная пирамида
   из трёх SVG-граней крутится слева направо вокруг вертикали — 7 с на оборот,
   равномерно. Только transform и opacity на композиторе, без WebGL. Спереди
   грань — тот же треугольник, что и плоский знак (основание 0.79, высота 0.69
   рамки). Геометрия: сторона основания a = 0.79B, радиус вписанной окружности
   основания r = a / (2√3) = 0.228B, высота H = 0.6875B, апофема грани
   l = √(H² + r²) = 0.7243B, наклон грани θ = atan(r / H) = 18.35°.
   Крутится только в верхней панели; в подвале, окне входа и при «без
   движения» — плоский знак. Вкладка скрыта — стоит. */
.brand-mark.is-3d { position: relative; display: inline-block; }
.brand-mark .bm-flat { display: block; width: 100%; height: 100%; }
.brand-mark .bm-scene { display: none; }
.topbar .brand-mark.is-3d .bm-flat { display: none; }
.topbar .brand-mark.is-3d .bm-scene {
    display: block;
    position: absolute;
    inset: 0;
    perspective: calc(var(--bm) * 5);
    perspective-origin: 50% 30%;
}
.brand-mark .bm-spin {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: bm-spin 7s linear infinite;
}
.brand-mark .bm-face {
    position: absolute;
    left: calc(var(--bm) * 0.105);
    top: calc(var(--bm) * 0.1132);
    width: calc(var(--bm) * 0.79);
    height: calc(var(--bm) * 0.7243);
    transform-origin: 50% 100%;
    transform: rotateY(calc(var(--k) * 120deg)) translateZ(calc(var(--bm) * 0.228)) rotateX(18.35deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.brand-mark .bm-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Свет — спереди слева: грань ярче, когда повёрнута к нему, и темнее сбоку.
   Своя тень у каждой грани, тот же цикл со сдвигом на треть оборота. */
.brand-mark .bm-shade {
    position: absolute;
    inset: 0;
    background: #07070d;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    opacity: 0.12;
    animation: bm-shade 7s linear infinite;
    animation-delay: calc(var(--k) * -2.3333s);
}
@keyframes bm-spin {
    from { transform: rotateX(-6deg) rotateY(0deg); }
    to { transform: rotateX(-6deg) rotateY(360deg); }
}
@keyframes bm-shade {
    0% { opacity: 0.12; }
    12.5% { opacity: 0.32; }
    25% { opacity: 0.56; }
    37.5% { opacity: 0.66; }
    62.5% { opacity: 0.66; }
    75% { opacity: 0.4; }
    87.5% { opacity: 0.02; }
    100% { opacity: 0.12; }
}
.is-tab-hidden .brand-mark .bm-spin,
.is-tab-hidden .brand-mark .bm-shade { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .topbar .brand-mark.is-3d .bm-scene { display: none; }
    .topbar .brand-mark.is-3d .bm-flat { display: block; }
}
.brand-word {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 17px;
    letter-spacing: -0.01em;
}
.brand-word b { font-weight: inherit; }

/* Вкладки разделов. Активная — стеклянная пилюля с тонкой жемчужной чертой снизу (без свечения). */
.navtabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
/* MCP-C5 (UX-R2-08): затухание справа — только когда справа есть скрытые вкладки
   (класс ставит shell.js по ResizeObserver и прокрутке), а не всегда. */
.navtabs.is-overflow {
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.navtabs::-webkit-scrollbar { display: none; }
.navtab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 13px;
    border-radius: var(--r-pill);
    color: var(--text-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: color var(--dur-2) ease, background var(--dur-2) ease;
}
.navtab svg { width: 17px; height: 17px; transition: transform var(--dur-3) var(--ease-spring); }
.navtab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.navtab:hover svg { transform: translateY(-1px) scale(1.08); }
.navtab[aria-current="page"] {
    color: var(--text);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.navtab[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: -1px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(222, 216, 242, 0.2), rgba(230, 226, 246, 0.9) 30%, rgba(214, 234, 232, 0.85) 65%, rgba(240, 228, 212, 0.2));
}
.navtab[aria-current="page"] svg { color: var(--text); }
.navtab .badge { margin-left: 2px; }
.navtabs .nav-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--line-2); flex: 0 0 auto; }
/* MCP-C5 (UX-R2-08): с вкладкой «MCP · Плагины» ряд на ноутбуках не помещался
   (1280 px, ru, гость: 1020 px вкладок на 628 px места), а flex тихо сжимал
   вкладки — значки уходили в 0 px (svg max-width: 100%), и ряд лишь казался
   поместившимся. На компьютере вкладка теперь не сжимается, а shell.js (fitTabs)
   ставит на .topbar первую ступень, на которой ряд помещается: fit-1 — плотнее,
   fit-2 — подпись «MCP» (полная — в aria-label и title), fit-3 — ещё плотнее,
   fit-4 — без значков, fit-5 — знак без слова «AstraGPT». */
.navtab .nt-short { display: none; }
@media (min-width: 901px) {
    .navtab, .navtab svg { flex-shrink: 0; }
    .topbar.fit-1 .navtab { padding: 0 10px; }
    .topbar.fit-1 .navtabs .nav-sep { margin: 0 3px; }
    .topbar.fit-2 .navtab .nt-full { display: none; }
    .topbar.fit-2 .navtab .nt-short { display: inline; }
    .topbar.fit-3 .navtab { gap: 6px; padding: 0 9px; }
    .topbar.fit-4 .navtab svg { display: none; }
    .topbar.fit-4 .navtab { padding: 0 11px; }
    .topbar.fit-5 .brand-word { display: none; }
}

.topbar-end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.credits-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 10px;
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    transition: background var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.credits-pill:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 0 0 1px var(--line-3); }
.credits-pill .coin {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aurora);
    background-size: 200% 100%;
    color: var(--on-aurora);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.credits-pill .coin svg { width: 13px; height: 13px; }

.pricing-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    /* Тонкая жемчужная обводка — без заливки и свечения (акцент — только главная кнопка). */
    background:
        linear-gradient(#0b0b10, #0b0b10) padding-box,
        linear-gradient(100deg, rgba(214, 208, 238, 0.55), rgba(200, 226, 226, 0.4) 50%, rgba(236, 222, 204, 0.5)) border-box;
    border: 1px solid transparent;
    transition: background var(--dur-2) ease;
}
.pricing-link svg { width: 16px; height: 16px; color: var(--violet-hi); }
.pricing-link:hover, .pricing-link[aria-current="page"] {
    background:
        linear-gradient(#15151c, #15151c) padding-box,
        linear-gradient(100deg, rgba(222, 216, 242, 0.75), rgba(208, 232, 232, 0.55) 50%, rgba(240, 228, 212, 0.7)) border-box;
}

.avatar-btn {
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 50%;
}
.avatar-btn .avatar { --size: 38px; transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) ease; }
.avatar-btn:hover .avatar, .avatar-btn[aria-expanded="true"] .avatar { transform: scale(1.06); box-shadow: 0 0 26px -4px var(--glow-violet); }

/* ── Меню профиля ──────────────────────────────────────────────────────── */
/* Меню показывается целиком: общий потолок поповера (640 px) для него снят.
   Если экран всё же ниже меню, прокручивается внутренний блок, а не сам
   поповер: иначе рамка ::before (inset: 0) остаётся на первом экране, и
   «Выйти» уезжает за её край (владелец, 27.09). */
.profile-menu {
    width: 340px; padding: 12px; --origin: top right;
    max-height: calc(100dvh - var(--nav-h, 64px) - 16px);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.profile-menu > .profile-menu-inner {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.profile-menu > .profile-menu-inner::-webkit-scrollbar { display: none; }
/* Низкий экран (ноутбук 720 px, iPhone SE 667 px): то же меню плотнее, чтобы
   влезало целиком без прокрутки. Цель нажатия остаётся ≥ 36 px. */
@media (max-height: 800px) {
    .profile-menu { padding: 10px; }
    .profile-menu .pm-head { padding: 2px 4px 8px; gap: 10px; }
    .profile-menu .pm-head .avatar { --size: 40px; }
    .profile-menu .pm-cta { margin-bottom: 8px; min-height: 40px; }
    .profile-menu .pm-card { padding: 10px 12px; gap: 7px; margin-bottom: 4px; }
    .profile-menu .menu-item { min-height: 36px; }
    .profile-menu .menu-sep { margin: 4px; }
}
.pm-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 12px; }
.pm-head .avatar { --size: 52px; }
.pm-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-plan { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--fs-sm); color: var(--text-2); }
.pm-plan b { font-weight: var(--fw-semibold); }
.pm-cta { width: 100%; margin-bottom: 10px; }

.pm-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    margin-bottom: 8px;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 0 0 1px var(--line);
}
.pm-card-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); }
.pm-card-row .end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.pm-card-row .end svg { width: 14px; height: 14px; }
.pm-card-row > svg { width: 18px; height: 18px; color: var(--text-2); }
.pm-card-row.is-link { cursor: pointer; border-radius: 10px; margin: -4px; padding: 4px; }
.pm-card-row.is-link:hover { background: rgba(255, 255, 255, 0.05); }
.pm-card .menu-sep { margin: 2px 0; }
.pm-sub { font-size: var(--fs-xs); color: var(--text-3); }
.pm-lang-select {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: var(--fs-md);
    text-align: right;
    padding-right: 4px;
    cursor: pointer;
}
.pm-lang-select option { background: #111; color: #fff; }

/* ── Телефон и планшет: вкладки второй строкой ─────────────────────────── */
@media (max-width: 1180px) {
    .brand-word { display: none; }
}
@media (max-width: 900px) {
    :root { --tabs-h: 50px; }
    .topbar { flex-wrap: wrap; height: auto; padding-top: 8px; row-gap: 6px; }
    .topbar > .brand { order: 1; }
    .topbar > .topbar-end { order: 2; margin-left: auto; }
    .navtabs {
        order: 3;
        flex: 1 0 100%;
        height: 44px;
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter) 6px;
    }
    .pricing-link span { display: none; }
    .pricing-link { padding: 0 11px; }
    .brand-word { display: inline; font-size: 15px; }
    .page-root { min-height: calc(100dvh - var(--nav-h) - var(--tabs-h)); }
}
@media (max-width: 420px) {
    .credits-pill { padding: 0 10px 0 8px; }
    .brand-word { display: none; }
    .profile-menu { width: calc(100vw - 16px); }
}