/* Карточка как профиль в Discord: серебряный градиент поверх ночного фона.
           Фон и шапка — bg.* (любой формат), аватарка — sona.*; после загрузки запусти retiaq-images —
           он сделает лёгкие bg.2560.jpg, bg.1280.jpg и ava.512.webp. Пока фона нет — night.svg. */
        :root {
            color-scheme: dark;
            --night: #0c1110;
            --card-1: #eae8e8;
            --card-2: #d4d2d3;
            --card-3: #c3c1c2;
            --card-4: #9e9d9d;
            --ink: #141414;
            --ink-2: #44444a;
            --panel: rgba(255, 255, 255, 0.30);
            --panel-line: rgba(255, 255, 255, 0.55);
            --sep: rgba(0, 0, 0, 0.11);
            --hover: rgba(0, 0, 0, 0.06);
            --graphite: #1b2220;
            --online: #3f9d63;
            --bg-image-desktop: url("/api/bio/static/retiaq/night.svg");
            --bg-image-mobile: url("/api/bio/static/retiaq/night.svg");
            --bg-image: var(--bg-image-desktop);
            --bg-zoom: 1; --bg-bright: 0.62; --bg-blur: 3px; --vig: 0.65; --fog-k: 1;
            --fog-rgb: 170, 192, 186; --vig-rgb: 5, 8, 7; --banner-bg: #26332f; --banner-fade: rgba(12, 17, 16, 0.25);
            --card-edge: rgba(255, 255, 255, 0.35); --ring: rgba(20, 28, 26, 0.55);
            --chip-bg: rgba(255, 255, 255, 0.82); --chip-ink: #2c2c30; --chip-bump-bg: #141414; --chip-bump-ink: #ffffff;
            --tag-bg: rgba(255, 255, 255, 0.7); --tag-ink: #141414; --tag-line: rgba(0, 0, 0, 0.06);
            --bio-ink: #222226; --bi-ink: #2a3331;
            --disc: #1b2220; --disc-ink: #e9efec; --player: #1b2220; --player-shade: 12, 17, 16;
            --play-bg: #e9e7e7; --play-ink: #111111; --wave: #cfe0d8;
            --ava-zoom: 1; --ava-fx: 50%; --ava-fy: 50%;
            --bg-focus: 50% 14%;   /* главное на картинке — лицо и луна в верхней части */

            /* для шторки с фотками */
            --surface-container: #d9d7d8;
            --surface-container-highest: #c3c1c2;
            --on-surface: var(--ink);
            --on-surface-variant: var(--ink-2);
            --primary: #141414;
            --scrim: rgba(4, 8, 7, 0.72);

            --shape-xl: 24px;
            --shape-l: 18px;
            --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --font: 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
        }

        @media (max-width: 700px) { :root { --bg-image: var(--bg-image-mobile); } }   /* телефонам — лёгкая версия */
        *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html { height: 100%; background: var(--night); }
        html.is-locked { overflow: hidden; }
        body {
            margin: 0;
            min-height: 100%;
            color: var(--ink);
            font-family: var(--font);
            font-size: 16px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        }
        button { font: inherit; color: inherit; }
        .ms { width: 24px; height: 24px; fill: currentColor; flex: none; display: block; }

        /* ---------- Ночной фон: картинка, туман, летучие мыши ---------- */
        .night { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--night); }
        .night-img {
            position: absolute; inset: -24px;
            background-color: var(--night);
            background-image: var(--bg-image);
            background-position: var(--bg-focus);
            background-size: cover;
            background-repeat: no-repeat;
            filter: blur(var(--bg-blur)) brightness(var(--bg-bright)) saturate(0.85);
            transform: scale(var(--bg-zoom)); transform-origin: var(--bg-focus);
        }
        .night::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(var(--vig-rgb), var(--vig)) 100%);
        }
        .fog {
            position: absolute; left: -50%; width: 200%; height: 45vh; bottom: -6vh;
            background:
                radial-gradient(40% 60% at 20% 60%, rgba(var(--fog-rgb), calc(0.16 * var(--fog-k))), transparent 70%),
                radial-gradient(35% 50% at 55% 70%, rgba(var(--fog-rgb), calc(0.12 * var(--fog-k))), transparent 70%),
                radial-gradient(45% 60% at 85% 55%, rgba(var(--fog-rgb), calc(0.14 * var(--fog-k))), transparent 70%);
            animation: drift 70s linear infinite alternate;
        }
        .fog.f2 { bottom: 18vh; height: 30vh; opacity: 0.6; animation-duration: 95s; animation-direction: alternate-reverse; }
        @keyframes drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }


        /* ---------- Раскладка ---------- */
        .page { width: 100%; max-width: 460px; margin: 0 auto; padding: 28px 14px 24px; }

        .card {
            position: relative;
            border-radius: 22px;
            overflow: hidden;
            background: linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 30%, var(--card-3) 62%, var(--card-4) 100%);
            box-shadow: 0 0 0 1px var(--card-edge) inset, 0 24px 70px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
            animation: card-in 800ms var(--ease-emphasized) both;
        }
        @keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

        .banner {
            aspect-ratio: 5 / 2;   /* как баннер в Discord */
            max-height: 200px;
            background-color: var(--banner-bg);
            position: relative;
            overflow: hidden;
        }
        .banner::before {   /* картинка шапки вынесена в ::before, чтобы работал масштаб; при zoom=1 вид оригинальный */
            content: ''; position: absolute; inset: 0;
            background-image: var(--bg-image);
            background-position: var(--bg-focus);
            background-size: cover;
            background-repeat: no-repeat;
            transform: scale(var(--bg-zoom)); transform-origin: var(--bg-focus);
        }
        .banner::after {   /* мягкий переход шапки в карточку */
            content: ''; position: absolute; inset: auto 0 0; height: 40%;
            background: linear-gradient(transparent, var(--banner-fade));
        }
        .card-body { padding: 0 16px 16px; }

        /* ---------- Профиль ---------- */
        .ava-row { position: relative; display: flex; align-items: flex-end; gap: 10px; margin-top: -58px; min-height: 120px; }
        .avatar {
            position: relative;
            appearance: none; border: 0; padding: 0; margin: 0; flex: none;
            width: 124px; height: 124px;
            border-radius: 50%;
            background: var(--card-1);
            box-shadow: 0 0 0 6px var(--card-1);
            cursor: pointer;
            touch-action: manipulation;
        }
        .avatar:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; }
        .avatar-press { display: block; width: 100%; height: 100%; transition: transform 420ms var(--ease-spring); }
        .avatar:active .avatar-press { transform: scale(0.92); transition-duration: 120ms; transition-timing-function: var(--ease-emphasized); }
        /* кольцо-«часы» вокруг аватарки крутится, от тычков быстрее (скрипт вращает #cookie-shape) */
        .cookie { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; will-change: transform; }
        .cookie::before {
            content: ''; position: absolute; inset: -11px; border-radius: 50%;
            background: repeating-conic-gradient(var(--ring) 0 5deg, transparent 5deg 15deg);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
                    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
        }
        .cookie-clip { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
        .ava-up { display: block; width: 100%; height: 100%; }
        .cookie img {
            display: block; width: 100%; height: 100%; border-radius: 50%;
            object-fit: cover; background: var(--card-3);
            user-select: none; -webkit-user-drag: none; pointer-events: none;
        }
        .status {
            position: absolute; left: 70%; top: 68%; width: 30px; height: 30px; border-radius: 50%;
            background: var(--online); box-shadow: 0 0 0 5px var(--card-1);
        }

        /* пузырь, как статус в Discord: в нём счётчик тычков */
        .chip {
            position: relative;
            align-self: center;
            margin: 52px 0 0 4px;
            display: inline-flex; align-items: center; gap: 8px;
            max-width: 100%;
            padding: 9px 14px 9px 12px;
            border-radius: 18px;
            background: var(--chip-bg);
            color: var(--chip-ink);
            font-size: 14px; line-height: 18px; font-weight: 500; font-style: italic;
            font-variant-numeric: tabular-nums;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
            transition: opacity 400ms var(--ease-emphasized), background-color 300ms linear, color 300ms linear;
        }
        .chip::before, .chip::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
        .chip::before { width: 12px; height: 12px; left: -6px; bottom: 4px; }
        .chip::after { width: 6px; height: 6px; left: -14px; bottom: -2px; }
        .chip .ms { width: 18px; height: 18px; font-style: normal; }
        .chip.is-loading { opacity: 0; }
        .chip.is-bumped { background: var(--chip-bump-bg); color: var(--chip-bump-ink); transition-duration: 0ms; }

        h1 {
            margin: 14px 0 0;
            font-size: 30px; line-height: 36px; font-weight: 800;
            font-variation-settings: 'wdth' 100, 'opsz' 36;
            letter-spacing: -0.01em;
        }
        .handle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; color: var(--ink-2); font-size: 15px; }
        .tag {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 1px 9px; border-radius: 8px;
            background: var(--tag-bg); color: var(--tag-ink);
            font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
            box-shadow: 0 0 0 1px var(--tag-line);
        }
        .badges {
            display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 10px;
            border-radius: 9px; background: var(--panel); box-shadow: 0 0 0 1px var(--panel-line) inset;
            font-size: 16px; line-height: 22px;
        }
        .bi { width: 20px; height: 20px; fill: var(--bi-ink); color: var(--bi-ink); flex: none; display: block; }
        .badges .bi:nth-child(2) { width: 26px; }
        .tag .bi { width: 13px; height: 13px; fill: currentColor; color: inherit; }
        .bio { margin: 12px 0 0; font-size: 15px; line-height: 21px; color: var(--bio-ink); }

        /* ---------- Блоки внутри карточки ---------- */
        .content { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
        .panel-title { margin: 0 2px -2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

        /* плеер — тёмный, как кнопки «+3» в Discord */
        .player {
            position: relative; display: block; overflow: hidden; isolation: isolate;
            padding: 14px 14px 14px 16px;
            border-radius: 16px;
            background: var(--player);
            color: #fff; text-decoration: none;
        }
        .player:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
        .player-art {
            position: absolute; inset: 0; z-index: -2;
            background-size: cover; background-position: center;
            filter: grayscale(0.6) brightness(0.8);
            opacity: 0; transform: scale(1.08);
            transition: opacity 600ms var(--ease-emphasized), transform 1200ms var(--ease-emphasized);
        }
        .player-art.is-visible { opacity: 1; transform: scale(1); }
        .player::after {
            content: ''; position: absolute; inset: 0; z-index: -1;
            background: linear-gradient(100deg, rgba(var(--player-shade), 0.92) 25%, rgba(var(--player-shade), 0.55) 100%);
        }
        .player-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .player-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
        .player-label .ms { width: 16px; height: 16px; }
        .play-btn {
            width: 40px; height: 40px; display: grid; place-items: center;
            background: var(--play-bg); color: var(--play-ink); border-radius: 13px;
            transition: border-radius 350ms var(--ease-spring), transform 350ms var(--ease-spring);
        }
        .player:hover .play-btn, .player:focus-visible .play-btn { border-radius: 20px; }
        .player:active .play-btn { transform: scale(0.92); }
        .player-track {
            margin: 10px 0 0; min-height: 24px;
            font-size: 18px; line-height: 24px; font-weight: 700;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .player-artist {
            margin: 0; min-height: 18px; font-size: 14px; line-height: 18px; color: rgba(255, 255, 255, 0.72);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .player-wave { margin-top: 12px; height: 14px; overflow: hidden; }
        .player-wave svg { display: block; height: 14px; width: calc(100% + 24px); animation: wave 1.2s linear infinite; animation-play-state: paused; }
        .player.is-live .player-wave svg { animation-play-state: running; }
        .player-wave path { fill: none; stroke: var(--wave); stroke-width: 3; stroke-linecap: round; }
        @keyframes wave { to { transform: translateX(-24px); } }

        /* фотки */
        .gallery-card {
            position: relative; overflow: hidden; isolation: isolate;
            appearance: none; border: 0; width: 100%;
            display: flex; align-items: center; justify-content: space-between; gap: 16px;
            padding: 10px 14px 10px 16px;
            border-radius: 16px;
            background: var(--panel); box-shadow: 0 0 0 1px var(--panel-line) inset;
            text-align: left; cursor: pointer;
        }
        .gallery-card[hidden] { display: none; }
        .gallery-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); opacity: 0; transition: opacity 150ms linear; }
        .gallery-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
        .gallery-text { display: flex; flex-direction: column; min-width: 0; }
        .gallery-title { font-size: 17px; line-height: 22px; font-weight: 700; }
        .gallery-sub { font-size: 13px; line-height: 18px; color: var(--ink-2); }
        .gallery-stack { position: relative; flex: none; width: 108px; height: 72px; }
        .gallery-stack img {
            position: absolute; top: 5px; width: 48px; height: 62px;
            object-fit: cover; border-radius: 11px;
            border: 2px solid var(--card-1); background: var(--card-3);
            transition: transform 450ms var(--ease-spring);
        }
        .gallery-stack img:nth-child(1) { left: 4px; transform: rotate(-10deg); }
        .gallery-stack img:nth-child(2) { left: 30px; transform: translateY(-4px); z-index: 1; }
        .gallery-stack img:nth-child(3) { left: 56px; transform: rotate(10deg); }
        .gallery-card:active .gallery-stack img { transform: scale(0.94); }

        /* ссылки — как меню в профиле Discord */
        .links {
            margin: 0; padding: 4px 0; list-style: none;
            border-radius: 16px;
            background: var(--panel); box-shadow: 0 0 0 1px var(--panel-line) inset;
        }
        .links li + li .link::after { content: ''; position: absolute; top: 0; left: 62px; right: 14px; height: 1px; background: var(--sep); }
        .link {
            position: relative; overflow: hidden; isolation: isolate;
            display: flex; align-items: center; gap: 12px;
            min-height: 56px; padding: 7px 14px 7px 12px;
            color: var(--ink); text-decoration: none;
        }
        .link::before { content: ''; position: absolute; inset: 0 4px; border-radius: 12px; background: var(--ink); opacity: 0; transition: opacity 150ms linear; z-index: -1; }
        .link:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 12px; z-index: 1; }
        .link-icon {
            flex: none; width: 36px; height: 36px; border-radius: 50%;
            display: grid; place-items: center;
            background: var(--disc); color: var(--disc-ink);
        }
        .link-icon svg { width: 18px; height: 18px; fill: currentColor; }
        .link-icon .ms { width: 20px; height: 20px; }
        .link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .link-title { font-size: 15px; line-height: 20px; font-weight: 600; }
        .link-sub { font-size: 13px; line-height: 18px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .link-trail { color: var(--ink-2); width: 18px; height: 18px; transition: transform 250ms var(--ease-emphasized); }

        .ripple {
            position: absolute; border-radius: 50%; background: currentColor; opacity: 0.12;
            transform: scale(0); pointer-events: none; z-index: -1;
            animation: ripple 550ms var(--ease-emphasized) forwards;
        }
        @keyframes ripple { to { transform: scale(1); opacity: 0; } }

        .fade-in { animation: fade-in 700ms 250ms var(--ease-emphasized) both; }
        @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


        /* аватарки ещё нет (sona.png не загружена) — заглушка вместо битой картинки */
        .avatar.no-ava .cookie img { visibility: hidden; }
        .avatar.no-ava .cookie {
            background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.35), transparent 60%), linear-gradient(160deg, #a9b8b3, #56645f);
        }
        .ghost { display: none; position: absolute; left: 30%; top: 26%; width: 40%; height: 40%; fill: #f4f6f5; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); animation: boo 3s ease-in-out infinite alternate; }
        .avatar.no-ava .ghost { display: block; }
        @keyframes boo { to { transform: translateY(-6%) rotate(-4deg); } }

        /* ---------- Мышь и наведение (ПК) ---------- */
        @media (hover: hover) and (pointer: fine) {
            .link:hover::before, .gallery-card:hover::before, .icon-btn:hover::before { opacity: 0.07; }
            .link:hover .link-trail { transform: translate(2px, -2px); }
            .gallery-card:hover .gallery-stack img:nth-child(1) { transform: rotate(-16deg) translate(-8px, 2px); }
            .gallery-card:hover .gallery-stack img:nth-child(2) { transform: translateY(-10px); }
            .gallery-card:hover .gallery-stack img:nth-child(3) { transform: rotate(16deg) translate(8px, 2px); }
            .carousel-nav { display: grid; }
        }

        /* ---------- ПК: широкая карточка, профиль слева, плеер и ссылки справа ---------- */
        @media (min-width: 900px) {
            .page { max-width: 940px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 36px 40px 20px; }
            .banner { aspect-ratio: auto; max-height: none; height: clamp(170px, 28vh, 260px); }
            .card-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding: 0 28px 26px; }
            .ava-row { flex-direction: column; align-items: flex-start; gap: 0; margin-top: -70px; }
            .avatar { width: 140px; height: 140px; }
            .chip { margin: 18px 0 0 6px; align-self: flex-start; }
            .chip::before { left: 14px; top: -5px; bottom: auto; }
            .chip::after { left: 6px; top: -12px; bottom: auto; }
            .content { margin-top: 22px; }
            h1 { font-size: 34px; line-height: 40px; }
            .sheet {
                bottom: 24px; width: calc(100% - 48px); max-width: 960px; height: min(84vh, 720px);
                border-radius: var(--shape-xl); transform: translateY(calc(100% + 24px)); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
            }
            .sheet-bar { padding: 0 12px 12px 28px; }
            .carousel-wrap { padding-bottom: 20px; }
        }
        @media (min-width: 900px) and (max-height: 760px) {
            .page { padding-top: 18px; }
            .banner { height: 150px; }
            .link { min-height: 50px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
            .carousel { scroll-behavior: auto; }
        }

        /* ---------- Шторка с каруселью ---------- */
        .sheet-dialog {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--on-surface);
            overflow: hidden;
        }
        .sheet-dialog::backdrop { background: transparent; }
        .scrim {
            position: absolute;
            inset: 0;
            background: var(--scrim);
            opacity: 0;
            transition: opacity 350ms linear;
        }
        .sheet {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            width: 100%;
            max-width: 1120px;
            height: min(90vh, 880px);
            display: flex;
            flex-direction: column;
            background: var(--surface-container);
            border-radius: var(--shape-xl) var(--shape-xl) 0 0;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            transform: translateY(100%);
            transition: transform 450ms var(--ease-emphasized);
        }
        .sheet-dialog.is-open .scrim { opacity: 1; }
        .sheet-dialog.is-open .sheet { transform: translateY(var(--drag, 0px)); }
        .sheet.is-dragging { transition: none; }

        .sheet-head {
            flex: none;
            touch-action: none;
            cursor: grab;
            user-select: none;
        }
        .sheet.is-dragging .sheet-head { cursor: grabbing; }
        .handle {
            width: 32px;
            height: 4px;
            border-radius: 2px;
            margin: 16px auto 8px;
            background: var(--on-surface-variant);
            opacity: 0.4;
        }
        .sheet-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 12px 12px 24px;
        }
        .sheet-bar h2 {
            margin: 0;
            font-size: 22px;
            line-height: 28px;
            font-weight: 600;
            font-variation-settings: 'wdth' 90, 'opsz' 28;
        }
        .sheet-counter {
            color: var(--on-surface-variant);
            font-size: 14px;
            font-variant-numeric: tabular-nums;
        }
        .icon-btn {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            appearance: none;
            border: 0;
            padding: 0;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: transparent;
            color: var(--on-surface);
            cursor: pointer;
        }
        .icon-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: var(--on-surface);
            opacity: 0;
            transition: opacity 150ms linear;
        }
        .icon-btn:focus-visible {
            outline: 3px solid var(--primary);
            outline-offset: 2px;
        }
        .icon-btn:disabled {
            opacity: 0;
            pointer-events: none;
        }
        .sheet-close { margin-left: auto; }

        .carousel-wrap {
            position: relative;
            flex: 1;
            min-height: 0;
            padding-bottom: 24px;
        }
        .carousel {
            position: relative;
            height: 100%;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            outline: none;
        }
        .carousel::-webkit-scrollbar { display: none; }
        .carousel::before,
        .carousel::after {
            content: '';
            flex: 0 0 50%;
        }
        .photo {
            flex: none;
            position: relative;
            height: 100%;
            aspect-ratio: var(--ar, 0.75);
            max-width: 86%;
            scroll-snap-align: center;
            border-radius: var(--shape-xl);
            overflow: hidden;
            background: var(--surface-container-highest);
            transform: scale(var(--s, 1));
            cursor: pointer;
        }
        .photo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(var(--g, 1));
            opacity: 0;
            transition: opacity 400ms linear;
            user-select: none;
            -webkit-user-drag: none;
        }
        .photo img.is-loaded { opacity: 1; }
        .carousel-nav {
            position: absolute;
            top: calc(50% - 12px);
            translate: 0 -50%;
            z-index: 1;
            display: none;
            background: var(--surface-container-highest);
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            transition: opacity 200ms linear;
        }
        .carousel-nav.prev { left: 16px; }
        .carousel-nav.next { right: 16px; }
        .carousel-empty {
            display: grid;
            place-items: center;
            height: 100%;
            color: var(--on-surface-variant);
        }

    
        /* ======================================================================
           Дополнения интеграции (нашей системы): блоки, которых нет в оригинале,
           и состояния плеера. Написано на тех же токенах и в том же языке форм.
           ====================================================================== */

        .cookie img { object-position: var(--ava-fx) var(--ava-fy); transform-origin: var(--ava-fx) var(--ava-fy); transform: scale(var(--ava-zoom)); }
        a.link, button.link { text-align: left; font: inherit; }
        button.link { appearance: none; border: 0; background: none; width: 100%; cursor: pointer; }
        .link-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
        .link-icon.has-img { background: var(--card-3); }
        .link-sub:empty { display: none; }
        .links[hidden], .block[hidden], .hobbies[hidden], .footnote[hidden] { display: none; }

        /* хобби: те же «теги», что BOO */
        .hobbies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
        .hobby {
            padding: 3px 10px; border-radius: 8px;
            background: var(--tag-bg); color: var(--tag-ink);
            font-size: 12.5px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em;
            box-shadow: 0 0 0 1px var(--tag-line);
        }
        .bio:empty { display: none; }
        .bio { white-space: pre-line; overflow-wrap: anywhere; }
        .handle-row .tag[hidden], .badges[hidden] { display: none; }
        .handle-row:empty { display: none; }

        .panel-title { margin: 6px 2px -4px; }

        /* ---------- плеер ---------- */
        .player { cursor: pointer; }
        .player.is-static { cursor: default; }
        .player-top .player-label { min-width: 0; }
        .player-label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .player-count { color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; font-weight: 400; }
        .player-ctrl { display: inline-flex; align-items: center; gap: 6px; flex: none; }
        button.play-btn { appearance: none; border: 0; padding: 0; cursor: pointer; }
        button.play-btn:focus-visible, .nav-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
        .play-btn .ms { width: 24px; height: 24px; }
        .play-btn .i-pause, .player.is-playing .play-btn .i-play { display: none; }
        .player.is-playing .play-btn .i-pause { display: block; }
        .play-btn .spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(17, 17, 17, 0.2); border-top-color: var(--play-ink); animation: spin 700ms linear infinite; }
        .player[data-state="loading"] .play-btn .ms { display: none; }
        .player[data-state="loading"] .play-btn .spin { display: block; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .nav-btn {
            appearance: none; border: 0; padding: 0; cursor: pointer;
            width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px;
            background: rgba(255, 255, 255, 0.10); color: #fff;
            transition: border-radius 350ms var(--ease-spring), background-color 150ms linear, transform 350ms var(--ease-spring);
        }
        .nav-btn .ms { width: 20px; height: 20px; }
        .nav-btn:hover { background: rgba(255, 255, 255, 0.18); border-radius: 17px; }
        .nav-btn:active { transform: scale(0.92); }
        .nav-btn[hidden] { display: none; }
        .player[data-state="error"] .player-label, .player[data-state="unavailable"] .player-label { color: #ffb4a8; }
        .player.is-seekable .player-wave { cursor: pointer; }
        .player-wave { position: relative; }
        .w-layer { position: absolute; inset: 0; overflow: hidden; }
        .is-seekable .w-dim path { opacity: 0.32; }
        .w-live { visibility: hidden; }
        .is-seekable .w-live { visibility: visible; }
        .w-live { clip-path: inset(0 calc(100% - var(--prog, 0%)) 0 0); }
        .player-yandex { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.72); font-size: 13px; text-decoration: none; margin-top: 12px; }
        .player-yandex:hover { color: #fff; }
        .player-empty { color: rgba(255,255,255,.72); }

        /* ---------- шторки (треки, сообщение) ---------- */
        .sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 22px; overscroll-behavior: contain; scrollbar-width: none; }
        .sheet-body::-webkit-scrollbar { display: none; }
        .sheet.narrow { max-width: 560px; height: min(82vh, 680px); }
        .sheet.compact { max-width: 520px; height: auto; max-height: 92vh; }
        @media (min-width: 900px) {
            .sheet.narrow { max-width: 560px; height: min(78vh, 680px); }
            .sheet.compact { max-width: 520px; height: auto; }
        }
        .tracklist { margin: 0; padding: 4px 0; list-style: none; border-radius: 16px; background: var(--panel); box-shadow: 0 0 0 1px var(--panel-line) inset; }
        .tracklist li + li .link::after { content: ''; position: absolute; top: 0; left: 70px; right: 14px; height: 1px; background: var(--sep); }
        .tracklist .link { min-height: 64px; }
        .tracklist .link.is-current .link-title { font-weight: 800; }
        .cover { flex: none; width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: var(--disc); color: var(--disc-ink); display: grid; place-items: center; position: relative; }
        .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .cover .ms { width: 22px; height: 22px; }
        .eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding: 13px 0; background: rgba(12, 17, 16, 0.62); }
        .eq i { width: 3px; border-radius: 2px; background: #fff; height: 6px; animation: eq 800ms ease-in-out infinite alternate; }
        .eq i:nth-child(2) { animation-delay: -250ms; } .eq i:nth-child(3) { animation-delay: -500ms; }
        @keyframes eq { from { height: 4px; } to { height: 20px; } }
        .is-current.is-playing .eq { display: flex; }
        .track-dur { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
        .row-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
        .mini-btn { appearance: none; border: 0; background: none; cursor: pointer; position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); text-decoration: none; }
        .mini-btn .ms { width: 20px; height: 20px; }
        .mini-btn:hover { background: var(--hover); color: var(--ink); }
        .mini-btn.liked { color: #d6405f; }
        .mini-btn[hidden] { display: none; }
        .sheet-note { text-align: center; color: var(--on-surface-variant); font-size: 13px; padding: 14px 8px 2px; }
        .sheet-note a { color: var(--on-surface); font-weight: 600; }
        .sheet-empty { display: grid; place-items: center; min-height: 140px; color: var(--on-surface-variant); text-align: center; padding: 0 20px; }

        /* сообщение */
        .field {
            display: block; width: 100%; min-height: 150px; resize: vertical;
            padding: 12px 14px; border: 0; border-radius: 16px; outline: none;
            background: var(--panel); color: var(--ink); font: inherit; font-size: 15px; line-height: 21px;
            box-shadow: 0 0 0 1px var(--panel-line) inset;
        }
        .field:focus { box-shadow: 0 0 0 2px var(--ink) inset; }
        .field::placeholder { color: var(--ink-2); opacity: 0.8; }
        .btn-primary {
            appearance: none; border: 0; cursor: pointer; width: 100%; margin-top: 10px;
            min-height: 48px; padding: 0 20px; border-radius: 16px;
            background: var(--disc); color: var(--disc-ink); font-size: 15px; font-weight: 700;
            position: relative; overflow: hidden; isolation: isolate;
            transition: border-radius 350ms var(--ease-spring), transform 350ms var(--ease-spring), opacity 150ms linear;
        }
        .btn-primary:hover { border-radius: 22px; }
        .btn-primary:active { transform: scale(0.98); }
        .btn-primary:disabled { opacity: 0.5; cursor: default; }
        .btn-primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
        .form-status { min-height: 20px; margin: 10px 2px 0; font-size: 13px; line-height: 18px; color: var(--ink-2); text-align: center; }
        .form-status.ok { color: #2e8a55; font-weight: 600; }
        .form-status.err { color: #c0392b; }

        /* подвал страницы */
        .footnote { text-align: center; margin: 14px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
        .footnote a { color: inherit; }

        /* страница /music */
        .page-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
        .music-hero { padding: 18px 16px 6px; }
        .music-hero h1 { margin: 0; }
        .music-hero p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
        .back-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px var(--panel-line) inset; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; position: relative; overflow: hidden; isolation: isolate; }
        .back-pill .ms { width: 20px; height: 20px; }
        .back-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); opacity: 0; transition: opacity 150ms linear; }
        .back-pill:hover::before { opacity: 0.07; }
        .music-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
        .music-card .banner { max-height: 120px; }
        @media (min-width: 900px) { .page.music { max-width: 620px; } .music-card .banner { height: 120px; max-height: 120px; aspect-ratio: auto; } }

        /* заглушки только для предпросмотра в редакторе */
        .pv-hint { display: none; border-radius: 16px; padding: 14px 16px; font-size: 13px; line-height: 18px; color: var(--ink-2); text-align: center; box-shadow: 0 0 0 1px var(--panel-line) inset; background: var(--panel); }
        .is-preview .pv-hint { display: block; }
        .is-preview .pv-hint[hidden] { display: none; }

        .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 50; padding: 10px 16px; border-radius: 14px; background: var(--player); color: #fff; font-size: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease-emphasized); max-width: calc(100% - 32px); text-align: center; }
        .toast.is-shown { opacity: 1; }
        .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }