/* ============ Публичная страница-визитка ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; min-height: 100dvh;
    font-family: var(--font); color: var(--text);
    background: var(--bg1);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Фон ---------- */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.bg-gradient .bg { background: linear-gradient(var(--angle), var(--bg1), var(--bg2)); }
.bg-color .bg { background: var(--bg1); }
.bg-image .bg, .bg-video .bg { background: #000; }
.bg-animate .bg {
    background: linear-gradient(var(--angle), var(--bg1), var(--bg2), var(--bg1), var(--bg2));
    background-size: 400% 400%;
    animation: bgmove 18s ease infinite;
}
@keyframes bgmove { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.bg-media {
    position: absolute; inset: calc(var(--blur) * -2);
    width: calc(100% + var(--blur) * 4); height: calc(100% + var(--blur) * 4);
    background: center/cover no-repeat; object-fit: cover;
    filter: blur(var(--blur));
}
.bg-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
.bg-color .bg-media, .bg-gradient .bg-media, .bg-image video.bg-media, .bg-video div.bg-media { display: none; }
.bg-image .bg-dim, .bg-video .bg-dim { opacity: var(--dim); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Колонка ---------- */
.wrap {
    width: 100%; max-width: 560px; margin: 0 auto;
    padding: 48px 16px calc(32px + env(safe-area-inset-bottom));
}
.layout-cover .wrap, .layout-hero .wrap { padding-top: 0; }

/* ---------- Шапка ---------- */
.hero { text-align: center; position: relative; }
.hero-body { position: relative; }
.avatar {
    width: 112px; height: 112px; margin: 0 auto 16px; border-radius: 50%;
    padding: 0; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ava-rounded .avatar { border-radius: 28px; }
.ava-square .avatar { border-radius: 6px; }
.ava-ring .avatar { padding: 4px; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ava-ring .avatar img { border: 3px solid var(--bg1); }
.ava-ring .avatar::after {
    content: ""; position: absolute; inset: -6px; border-radius: inherit;
    background: inherit; filter: blur(14px); opacity: .45; z-index: -1;
}

/* обложка как на tap2link */
.cover {
    margin: 0 -16px; height: 62vw; max-height: 420px; min-height: 260px;
    background: center 25%/cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
            mask-image: linear-gradient(#000 55%, transparent);
}
.layout-cover .hero-body { margin-top: -84px; }
/* фото на весь экран */
.layout-hero .cover { height: 88vh; height: 88svh; max-height: none; border-radius: 0 0 32px 32px; }
.layout-hero .hero-body { margin-top: -180px; padding-bottom: 8px; }

/* Вид шапки переключается только классом на body */
.layout-avatar .cover { display: none; }
.layout-cover .avatar, .layout-hero .avatar { display: none; }
/* Обложка без фото: мягкое пятно цветов темы вместо пустоты, чтобы имя не уезжало за экран */
.cover.is-empty {
    height: 190px; min-height: 0; max-height: none;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--btn) 45%, transparent), transparent 70%),
                linear-gradient(var(--bg2), transparent);
}
.layout-hero .cover.is-empty { height: 300px; }
.layout-cover .cover.is-empty + .hero-body { margin-top: -60px; }
.layout-hero .cover.is-empty + .hero-body { margin-top: -120px; }
.layout-hero .name, .layout-cover .name { text-shadow: 0 2px 18px rgba(0,0,0,.45); }

.name {
    margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.layout-hero .name { font-size: 34px; }
.verified { width: 22px; height: 22px; flex: none; }
.meta { margin-top: 6px; display: flex; gap: 12px; justify-content: center; align-items: center; font-size: 14px; opacity: .85; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 6px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52,199,89,.7); animation: online 2s infinite; }
@keyframes online { 70% { box-shadow: 0 0 0 8px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }
.bio { margin: 12px auto 0; max-width: 420px; font-size: 15px; line-height: 1.5; opacity: .92; white-space: pre-line; }
.meta b, .location b { font-weight: inherit; }
.meta:not(:has(> :not([hidden]))) { display: none; }
.location { margin-top: 8px; font-size: 13px; opacity: .7; }

/* ---------- Соцсети ---------- */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 20px 0 8px; }
.socials a {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    font-size: 22px; transition: transform .2s, background .2s;
}
.socials a:hover { transform: translateY(-3px) scale(1.08); background: rgba(255,255,255,.12); }
.si {
    display: inline-block; width: 1em; height: 1em; background: currentColor;
    -webkit-mask: var(--si) center/contain no-repeat; mask: var(--si) center/contain no-repeat;
}

/* ---------- Блоки ---------- */
.blocks { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

/* стиль кнопок */
.b-link, .b-form, .b-countdown, .b-embed {
    --r: 999px;
    border-radius: var(--r);
}
.shape-rounded .b-link { --r: 16px; }
.shape-square .b-link { --r: 4px; }
.shape-pill .b-link { --r: 999px; }
.b-form, .b-countdown, .b-embed { --r: 22px; }
.shape-square .b-form, .shape-square .b-countdown, .shape-square .b-embed, .shape-square .b-card, .shape-square .b-image { border-radius: 4px; }

.b-link {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 62px; padding: 8px 18px 8px 8px;
    font-weight: 700; text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, background .18s;
    overflow: hidden; isolation: isolate;
}
.b-link:active { transform: scale(.98); }
.b-link:hover { transform: translateY(-2px); }
.b-link .thumb { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: calc(var(--r) - 6px); overflow: hidden; }
.shape-pill .b-link .thumb { border-radius: 50%; }
.b-link .thumb img { width: 100%; height: 100%; object-fit: cover; }
.b-link .txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-link .txt b { font-size: 16px; line-height: 1.25; }
.b-link .txt small { font-weight: 500; font-size: 13px; opacity: .75; }
.b-link .end { width: 28px; flex: none; opacity: .6; font-size: 14px; }

.btn-fill .b-link { background: var(--btn); color: var(--btn-text); }
.btn-outline .b-link { border: 2px solid var(--btn); color: var(--btn-text); }
.btn-outline .b-link:hover { background: color-mix(in srgb, var(--btn) 15%, transparent); }
.btn-glass .b-link {
    background: rgba(255,255,255,.14); color: var(--btn-text);
    border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.btn-shadow .b-link { background: var(--btn); color: var(--btn-text); box-shadow: 5px 5px 0 var(--text); border: 2px solid var(--text); }
.btn-shadow .b-link:hover { box-shadow: 7px 7px 0 var(--text); transform: translate(-2px,-2px); }
.btn-soft .b-link { background: color-mix(in srgb, var(--btn) 22%, transparent); color: var(--btn-text); }

/* бейдж: NEW, -50% и т.п. */
.badge {
    flex: none; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
    background: #ff3b5c; color: #fff; letter-spacing: .02em;
}
.b-card .badge { position: absolute; top: 14px; left: 14px; z-index: 2; }

/* большая карточка с фото */
.b-card {
    position: relative; display: block; border-radius: 24px; overflow: hidden;
    aspect-ratio: 4 / 3; background: rgba(255,255,255,.1); color: #fff;
    box-shadow: 0 14px 40px rgba(0,0,0,.25);
    transition: transform .25s ease;
    isolation: isolate;
}
.b-card:hover { transform: translateY(-3px); }
.b-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .3s; }
.b-card:hover img { transform: scale(1.04); }
.b-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.75)); }
.b-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; z-index: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.b-card .cap b { font-size: 19px; }
.b-card .cap small { font-size: 14px; opacity: .85; }
.b-card.is-blur img { filter: blur(22px) brightness(.8); transform: scale(1.15); }
.b-card .veil {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; font-weight: 800; font-size: 17px; padding-bottom: 40px;
}
.b-card .veil i { font-size: 32px; }
.b-card .veil small { font-weight: 500; font-size: 13px; opacity: .8; }

.b-image { display: block; border-radius: 20px; overflow: hidden; }
.b-image img { width: 100%; }

.b-header { margin: 14px 0 0; font-size: 15px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.b-text { font-size: 15px; line-height: 1.55; opacity: .92; }
.b-text.align-center { text-align: center; } .b-text.align-left { text-align: left; }
.b-divider { height: 8px; }
.b-divider.has-line { height: 1px; margin: 8px 15%; background: currentColor; opacity: .25; }

.b-embed { overflow: hidden; background: rgba(0,0,0,.25); }
.b-embed-title { padding: 12px 16px 10px; font-weight: 700; font-size: 15px; }
.b-embed iframe { display: block; width: 100%; border: 0; aspect-ratio: 16 / 9; }
.b-embed.kind-vertical iframe { aspect-ratio: 9 / 16; max-height: 80vh; }
.b-embed.kind-audio iframe { aspect-ratio: auto; }
.b-embed.kind-audio { background: transparent; }

/* таймер */
.b-countdown {
    padding: 18px 16px; text-align: center;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cd-title { font-weight: 700; margin-bottom: 12px; }
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-grid div { padding: 10px 0; border-radius: 14px; background: rgba(0,0,0,.18); }
.cd-grid b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.cd-grid small { font-size: 11px; opacity: .75; }
.b-countdown.is-done .cd-grid { display: none; }
.cd-done { font-size: 22px; font-weight: 800; }
.cd-link { display: inline-block; margin-top: 12px; padding: 10px 22px; border-radius: 999px; background: var(--btn); color: var(--btn-text); font-weight: 700; font-size: 14px; }
.btn-glass .cd-link, .btn-soft .cd-link, .btn-outline .cd-link { background: #fff; color: #111; }

/* форма */
.b-form {
    display: flex; flex-direction: column; gap: 10px; padding: 18px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.f-title { font-weight: 800; font-size: 17px; text-align: center; }
.f-sub { font-size: 14px; opacity: .8; text-align: center; margin-bottom: 4px; }
.b-form input, .b-form textarea {
    width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.18); color: inherit; font: inherit; font-size: 15px; outline: none; resize: vertical;
}
.b-form input::placeholder, .b-form textarea::placeholder { color: inherit; opacity: .55; }
.b-form input:focus, .b-form textarea:focus { border-color: rgba(255,255,255,.6); }
.b-form button { padding: 14px; border: 0; border-radius: 14px; background: var(--btn); color: var(--btn-text); font-weight: 800; font-size: 15px; }
.btn-glass .b-form button, .btn-soft .b-form button, .btn-outline .b-form button { background: #fff; color: #111; }
.b-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.f-msg { text-align: center; font-weight: 600; font-size: 14px; }
.b-form.is-sent input, .b-form.is-sent textarea, .b-form.is-sent button { display: none; }

/* светлые темы: стеклянные элементы темнее */
body[data-light] .b-countdown, body[data-light] .b-form { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.08); }
body[data-light] .b-form input, body[data-light] .b-form textarea { background: #fff; border-color: rgba(0,0,0,.12); }
body[data-light] .cd-grid div { background: rgba(255,255,255,.7); }
body[data-light].btn-glass .b-link { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.06); }

/* ---------- Анимации кнопок ---------- */
.anim-pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.anim-shake { animation: shake 4s infinite; }
@keyframes shake { 0%,88%,100% { transform: rotate(0); } 90% { transform: rotate(-2.5deg); } 92% { transform: rotate(2.5deg); } 94% { transform: rotate(-2deg); } 96% { transform: rotate(2deg); } 98% { transform: rotate(-1deg); } }
.anim-glow { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 12px rgba(255,90,150,.35); } 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 0 34px rgba(255,90,150,.75); } }
.anim-bounce { animation: bounce 2.2s infinite; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-7px); } 45% { transform: translateY(0); } 52% { transform: translateY(-3px); } }
.anim-shine::before {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    animation: shine 3s infinite;
}
@keyframes shine { 0% { left: -60%; } 60%,100% { left: 130%; } }

/* появление блоков */
.entrance .hero, .entrance .socials a, .entrance .blocks > * { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.entrance .blocks > .anim-pulse, .entrance .blocks > .anim-shake, .entrance .blocks > .anim-glow, .entrance .blocks > .anim-bounce {
    animation-name: rise, var(--loop); animation-duration: .6s, 2.2s; animation-iteration-count: 1, infinite;
}
.entrance .blocks > .anim-pulse { --loop: pulse; }
.entrance .blocks > .anim-shake { --loop: shake; animation-duration: .6s, 4s; }
.entrance .blocks > .anim-glow { --loop: glow; }
.entrance .blocks > .anim-bounce { --loop: bounce; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Подвал / кнопка поделиться ---------- */
.foot { margin-top: 36px; text-align: center; }
.foot-link { background: none; border: 0; font-size: 13px; opacity: .65; padding: 8px 14px; border-radius: 999px; }
.foot-link:hover { opacity: 1; background: rgba(255,255,255,.1); }
.fab-share {
    position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 20;
    width: 42px; height: 42px; border-radius: 50%; border: 0; font-size: 18px;
    background: rgba(0,0,0,.28); color: #fff;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.inapp-visible .fab-share { top: calc(62px + env(safe-area-inset-top)); }

/* ---------- Нижние шторки ---------- */
.sheet {
    position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: fade .2s ease;
}
.sheet[hidden] { display: none; }
.sheet-card {
    width: 100%; max-width: 480px; margin: 12px; padding: 26px 22px calc(18px + env(safe-area-inset-bottom));
    border-radius: 28px; background: #16161a; color: #fff; text-align: center; position: relative;
    animation: up .3s cubic-bezier(.2,.8,.2,1);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sheet-card h3 { margin: 6px 0 8px; font-size: 21px; }
.sheet-card p { margin: 0 0 16px; opacity: .75; line-height: 1.45; font-size: 15px; }
.sheet-emoji { font-size: 44px; }
.sheet-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 15px; margin-top: 10px; border: 0; border-radius: 16px;
    background: #fff; color: #111; font-weight: 700; font-size: 16px;
}
.sheet-btn.ghost { background: rgba(255,255,255,.1); color: #fff; }
.steps { text-align: left; margin: 0 0 8px; padding: 14px 16px 14px 34px; background: rgba(255,255,255,.07); border-radius: 16px; line-height: 1.8; font-size: 15px; }
.pointer { position: fixed; top: 6px; right: 16px; font-size: 46px; color: #fff; animation: nudge .9s infinite alternate; }
@keyframes nudge { to { transform: translate(5px, -6px); } }
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 6px; }
.share-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-radius: 16px; background: rgba(255,255,255,.07); font-size: 12px; cursor: pointer; }
.share-grid i { font-size: 24px; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

/* плашка «Откройте в браузере» */
.inapp-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px) 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: rgba(17,17,17,.92); color: #fff; font: 600 13px/1.3 system-ui, sans-serif;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: down .35s ease;
}
.inapp-bar[hidden] { display: none; }
.inapp-bar span { flex: 1; }
.inapp-bar button { flex: none; border: 0; border-radius: 999px; padding: 9px 16px; background: #fff; color: #111; font-weight: 800; font-size: 13px; }
.inapp-visible .wrap { padding-top: 92px; }
.inapp-visible.layout-cover .wrap, .inapp-visible.layout-hero .wrap { padding-top: 0; }
@keyframes down { from { transform: translateY(-100%); } }

.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
    padding: 12px 20px; border-radius: 999px; background: #111; color: #fff; font: 600 14px system-ui, sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: up .25s ease;
}
.toast[hidden] { display: none; }

@media (min-width: 700px) {
    .wrap { padding-top: 64px; }
    .cover { margin: 0; border-radius: 0 0 28px 28px; }
    .layout-hero .cover { height: 70vh; border-radius: 0 0 32px 32px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Живое превью в админке: редактируемый блок и скрытый блок */
.is-preview .lp-editing { outline: 2px dashed rgba(255,255,255,.75); outline-offset: 5px; }
.is-preview .lp-hidden { opacity: .35; filter: grayscale(.6); }
.is-preview .lp-empty { padding: 18px; border-radius: 16px; border: 2px dashed rgba(255,255,255,.35); text-align: center; font: 600 13px system-ui, sans-serif; opacity: .8; }