/* =====================================================================
   Puls · оформление v3
   Главная идея — пульс. Линия кардиограммы из логотипа проходит через весь
   сайт: полоска загрузки, «монитор» на главной, страница 404. Всё остальное
   спокойное: глубокий фон с мягким сиянием, стеклянные поверхности,
   отклик на каждое нажатие.
   Подключается после app.css и переопределяет его.
   ===================================================================== */
:root{
  --bg:#060a09;
  --ink-0:#060a09; --ink-1:#0c1210; --ink-2:#111a17; --ink-3:#18231f;
  --line:#1b2723; --line-2:#26352f;
  --pulse:#22d68a; --pulse-2:#14b06d; --mint:#9cf6cf; --violet:#8f7dff; --teal:#2bc4c9;
  --accent:#22d68a; --accent-2:#17b873; --accent-soft:rgba(34,214,138,.12);
  --spring:cubic-bezier(.22,1.25,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --glass-bg:linear-gradient(180deg,rgba(20,28,25,.78),rgba(13,19,17,.82));
  --hi:inset 0 1px 0 rgba(255,255,255,.045);
}
html{background:var(--bg)}
/* было: body перекрывал фоновое сияние, и его не было видно */
body{background:transparent!important}
::selection{background:rgba(34,214,138,.32);color:#fff}

/* ---------- фон: сияние, сетка точек, зерно ---------- */
.bg-fx{background:none!important}
.bg-fx::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 1px 1px,rgba(220,240,232,.06) 1px,transparent 0) 0 0/28px 28px;
  -webkit-mask:radial-gradient(120% 70% at 50% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);
          mask:radial-gradient(120% 70% at 50% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%)}
.bg-fx::after{content:"";position:absolute;inset:-50%;display:block!important;opacity:.05;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg-fx i{display:block;filter:blur(110px);opacity:.42}
.bg-fx i:nth-child(1){width:640px;height:480px;inset-inline-start:-160px;top:-220px;background:#0f8a56}
.bg-fx i:nth-child(2){width:560px;height:420px;inset-inline-end:-180px;top:-180px;background:#0f5d6b;opacity:.38}
.bg-fx i:nth-child(3){width:520px;height:380px;inset-inline-start:46%;top:-260px;background:#4b3fb0;opacity:.2}

/* ---------- шапка ---------- */
.top{background:rgba(7,11,10,.66);transition:transform .45s var(--out),background .3s,box-shadow .3s;border-bottom:0}
.top::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(38,53,47,.9) 15%,rgba(34,214,138,.45) 50%,rgba(38,53,47,.9) 85%,transparent)}
.top.scrolled{background:rgba(7,11,10,.84);box-shadow:0 14px 40px -18px rgba(0,0,0,.9)}
.top.hide{transform:translateY(-100%)}
.logo-mark{background:linear-gradient(145deg,#3cf0a8,#13a868);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px -8px rgba(34,214,138,.8)}
.logo-mark svg path{stroke-dasharray:46;stroke-dashoffset:0;animation:logoRun 4s var(--out) infinite}
.logo:hover .logo-mark svg path{animation-duration:1.3s}
.logo:hover .logo-mark{transform:none}
@keyframes logoRun{0%{stroke-dashoffset:46}32%,100%{stroke-dashoffset:0}}
.logo-mark.beat{animation:markBeat .9s var(--out)}
@keyframes markBeat{12%{transform:scale(1.12)}26%{transform:scale(.97)}40%{transform:scale(1.05)}}

/* полоска загрузки страницы — бегущий пульс */
.pulsebar{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;z-index:200;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(34,214,138,0),var(--pulse) 60%,var(--mint));box-shadow:0 0 10px rgba(34,214,138,.7);
  transition:width .5s var(--out),opacity .35s}
.pulsebar::after{content:"";position:absolute;inset-inline-end:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#dfffee;box-shadow:0 0 12px 3px var(--pulse)}
.pulsebar.on{opacity:1}
[dir=rtl] .pulsebar{background:linear-gradient(270deg,rgba(34,214,138,0),var(--pulse) 60%,var(--mint))}

/* меню разделов: всё, что не влезло, уходит в «Ещё» */
.nav-row{overflow:hidden}
.nav-more{white-space:nowrap}
.nav-more svg{width:15px;height:15px;transition:transform .3s var(--out)}
.nav-more.open svg{transform:rotate(180deg)}
.nav-more.on{color:var(--accent)}
.more-dd{width:250px;padding:6px}
.more-dd a,.more-dd button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;color:var(--muted);font-weight:500;text-align:start}
.more-dd a:hover,.more-dd button:hover{background:rgba(27,38,34,.8);color:var(--fg)}
.more-dd a.on{color:var(--accent);background:var(--accent-soft)}
.more-dd a,.more-dd button{animation:optIn .3s var(--out) both;animation-delay:calc(var(--i,0) * 25ms)}

/* ---------- поверхности ---------- */

/* ---------- кнопки ---------- */
/* волна от нажатия */
.rip{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.35;background:currentColor;animation:rip .6s var(--out) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}


/* ссылки: подчёркивание вырастает слева */

/* поля */
:focus-visible{outline:2px solid var(--pulse);outline-offset:2px;box-shadow:0 0 0 6px rgba(34,214,138,.15)}

/* ---------- появление страницы и карточек ---------- */
.page-root{animation:pageIn3 .6s var(--out) both}
@keyframes pageIn3{from{opacity:0;transform:translateY(12px)}}
.rv{opacity:0}
.rv.in{animation:rvIn .75s var(--out) both;animation-delay:var(--d,0ms)}
@keyframes rvIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.fpost{animation:none}

/* лента постов */
.fpost{transition:border-color .35s,box-shadow .35s,transform .45s var(--out)}
.fpost:hover{border-color:rgba(44,64,57,.95);box-shadow:var(--hi),0 22px 50px -30px rgba(0,0,0,.9)}
.fp-ava .ava{transition:transform .4s var(--spring),box-shadow .3s}
.fp-ava:hover .ava{transform:scale(1.07) rotate(-3deg);box-shadow:0 0 0 3px rgba(34,214,138,.25)}
.fp-title{transition:color .2s}
a.fp-title:hover{color:var(--mint)}
.fa{transition:background .2s,color .2s,transform .2s var(--spring)}
.fa:active{transform:scale(.92)}
.fa.like.on svg{animation:likeBeat .7s var(--spring)}
@keyframes likeBeat{15%{transform:scale(1.35)}30%{transform:scale(.92)}45%{transform:scale(1.15)}60%{transform:scale(1)}}
.fa.like{overflow:visible}
.fa.like.pop::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ff5d77 2px,transparent 3px) 50% 0/8px 8px no-repeat,radial-gradient(circle,#ffb35d 2px,transparent 3px) 100% 50%/8px 8px no-repeat,
    radial-gradient(circle,#ff5d77 2px,transparent 3px) 50% 100%/8px 8px no-repeat,radial-gradient(circle,#9cf6cf 2px,transparent 3px) 0 50%/8px 8px no-repeat,
    radial-gradient(circle,#ffb35d 2px,transparent 3px) 15% 15%/8px 8px no-repeat,radial-gradient(circle,#9cf6cf 2px,transparent 3px) 85% 85%/8px 8px no-repeat,
    radial-gradient(circle,#ff5d77 2px,transparent 3px) 85% 15%/8px 8px no-repeat,radial-gradient(circle,#ffb35d 2px,transparent 3px) 15% 85%/8px 8px no-repeat;
  animation:sparks .65s var(--out) forwards}
@keyframes sparks{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}

/* ---------- главная: монитор пульса ---------- */
.f-hero{position:relative;display:block;padding:26px 26px 20px;border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(18,28,24,.85),rgba(10,15,13,.85));border:1px solid rgba(34,48,43,.9);box-shadow:var(--hi),0 30px 60px -40px rgba(0,0,0,.9)}
.f-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(34,214,138,.05) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgba(34,214,138,.05) 1px,transparent 1px) 0 0/22px 100%;
  -webkit-mask:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent)}
.f-hero .eyebrow{font-size:12.5px;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--muted)}
.f-hero .eyebrow::before{display:none}
.f-hero .h1{font-size:clamp(28px,4vw,46px);line-height:1.08}
.ecg{display:block;width:calc(100% + 52px);height:74px;margin:14px -26px 4px;overflow:visible}
.ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ecg .base{stroke:rgba(34,214,138,.18);stroke-width:1.5}
.ecg .trace{stroke:#61f2b8;stroke-width:2.4;stroke-dasharray:110 890;stroke-dashoffset:1000;filter:drop-shadow(0 0 5px rgba(34,214,138,.9));animation:ecgRun var(--beat,3.4s) linear infinite}
@keyframes ecgRun{to{stroke-dashoffset:0}}
.counters{margin-top:6px;gap:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px dashed rgba(38,53,47,.9)}
.counters>div{padding:14px 16px 2px 0}
.counters>div+div{padding-inline-start:16px;border-inline-start:1px dashed rgba(38,53,47,.9)}
.counters b{font-size:24px;display:inline-flex;align-items:center;gap:8px}
.counters span{font-size:12.5px}
.counters .live{width:8px;height:8px}

/* ---------- профиль ---------- */
.pf-main .feed-col{max-width:none}
.pf-main .fp-text{max-width:78ch}
.pf-stat{transition:transform .35s var(--spring),border-color .3s,box-shadow .3s}
button.pf-stat:hover,a.pf-stat:hover{transform:translateY(-2px);border-color:rgba(34,214,138,.3);box-shadow:0 14px 30px -18px rgba(34,214,138,.5)}

/* ---------- пустые состояния и 404 ---------- */
.empty svg{animation:floaty 5s ease-in-out infinite;box-shadow:0 0 0 1px var(--line-2) inset,0 12px 30px -14px rgba(34,214,138,.5)}
@keyframes floaty{50%{transform:translateY(-5px)}}
.nf{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:56px 20px 60px;overflow:hidden}
.nf-code{font-family:var(--f-display);font-size:clamp(72px,14vw,140px);font-weight:700;line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(180deg,#e9fff4,rgba(156,246,207,.25));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-ecg{width:min(560px,100%);height:90px;overflow:visible}
.nf-ecg path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nf-ecg .flat{stroke:rgba(239,100,97,.75);stroke-dasharray:1;animation:flat 1.2s var(--out) both}
.nf-ecg .alive{stroke:var(--pulse);stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(34,214,138,.8));animation:revive 1.6s 1.4s var(--out) forwards}
@keyframes flat{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes revive{to{stroke-dashoffset:0}}
.nf b{font-size:20px;font-family:var(--f-display);font-weight:600;letter-spacing:-.01em}
.nf span{color:var(--muted);max-width:44ch}
.nf .row{justify-content:center;margin-top:6px}

/* ---------- загрузка ---------- */
.skel{gap:12px}
.skel i{display:none}
.sk-card{display:flex;gap:14px;padding:18px;border-radius:18px;border:1px solid rgba(34,48,43,.7);background:rgba(13,19,17,.6)}
.sk-card>div{flex:1;display:flex;flex-direction:column;gap:10px;padding-top:4px}
.sk-card u,.sk-card s{display:block;text-decoration:none;border-radius:8px;background:linear-gradient(90deg,rgba(27,38,34,.6) 25%,rgba(40,56,50,.9) 37%,rgba(27,38,34,.6) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
.sk-card u{width:44px;height:44px;border-radius:50%;flex:none}
.sk-card s{height:12px}
.sk-card s:nth-child(1){width:34%}
.sk-card s:nth-child(2){width:88%}
.sk-card s:nth-child(3){width:64%}

/* ---------- модалки, тосты ---------- */
.modal{animation:modalIn3 .5s var(--spring) both}
@keyframes modalIn3{from{opacity:0;transform:translateY(18px) scale(.94)}}

/* ---------- телефон ---------- */
@media (max-width:760px){
  :root{--tb-h:76px}
  .bg-fx i{display:none!important}
  .bg-fx{background:radial-gradient(110% 55% at 0% 0%,rgba(15,138,86,.26),transparent 60%),radial-gradient(90% 45% at 100% 0%,rgba(15,93,107,.2),transparent 60%),radial-gradient(70% 40% at 60% 0%,rgba(75,63,176,.12),transparent 60%)!important}
  .bg-fx::after{display:none!important}
  .top{background:rgba(7,11,10,.97)!important}
  /* нижняя панель — парящая «таблетка» */
  .tabbar{inset-inline-start:10px;inset-inline-end:10px;bottom:max(10px,env(safe-area-inset-bottom,0px));height:64px;padding:0 4px;border-radius:24px;
    border:1px solid rgba(44,61,55,.85);background:rgba(11,16,14,.96)!important;box-shadow:0 18px 40px -12px rgba(0,0,0,.95),var(--hi)}
  .tb-i.on::before{display:none}
  .tb-i.on::after{content:"";position:absolute;top:9px;left:50%;width:48px;height:28px;margin-left:-24px;border-radius:999px;z-index:-1;
    background:linear-gradient(180deg,rgba(34,214,138,.22),rgba(34,214,138,.08));box-shadow:inset 0 0 0 1px rgba(34,214,138,.2);animation:tbOn .45s var(--spring) both}
  .tb-i{isolation:isolate;gap:5px}
  .tb-i.on svg{transform:none}
  @keyframes tbOn{from{transform:scale(.4);opacity:0}}
  .tb-plus{margin-top:-26px;border-radius:20px;background:linear-gradient(150deg,#46f0ad,#13a868);box-shadow:0 14px 28px -10px rgba(34,214,138,.9),0 0 0 5px var(--bg),inset 0 1px 0 rgba(255,255,255,.4)}
  .tb-plus:active{transform:scale(.9) rotate(90deg)}
  .tb-plus svg{transition:transform .4s var(--spring)}
  .tb-badge{box-shadow:0 0 0 2px #0b100e}
  .f-hero{padding:20px 18px 16px;border-radius:20px}
  .ecg{width:calc(100% + 36px);margin:10px -18px 2px;height:56px}
  .counters>div{padding:12px 6px 0 0;min-width:0}
  .counters>div+div{padding-inline-start:8px}
  .counters b{font-size:18px;gap:5px}
  .counters span{font-size:11px;line-height:1.25;display:block}
  .f-hero .h1{font-size:27px}
  .rv.in{animation-duration:.55s}
  .ecg .trace{filter:none;stroke-width:2.6}
  .page-root{animation-duration:.4s}
  /* комментарии: заголовок и сортировка не налезают друг на друга */
  .comments>.row.between{flex-wrap:wrap;row-gap:10px}
  .comments>.row.between .seg{flex:none}
  /* профиль: все пять счётчиков видны сразу, без прокрутки вбок */
  .pf-stats:not(.og-stats){display:grid!important;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px!important;overflow:visible!important;padding:12px 12px 16px!important}
  .pf-stats:not(.og-stats) .pf-stat{min-width:0!important;padding:9px 4px;align-items:center;text-align:center;border-radius:12px}
  .pf-stats:not(.og-stats) .pf-stat>svg{display:none}
  .pf-stats:not(.og-stats) .pf-stat b{font-size:17px}
  .pf-stats:not(.og-stats) .pf-stat span{font-size:10px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1}
  .ecg .trace{animation:none;stroke-dasharray:none}
  .nf-ecg .alive{stroke-dashoffset:0}
}

/* профиль без баннера: у каждого своя «аврора» по нику */
.pf-cover.aurora{background:linear-gradient(135deg,#0d1714,#0a100e)}
.pf-cover.aurora>i.au{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;pointer-events:none;z-index:0}
.pf-cover.aurora>i.au:nth-of-type(1){width:46%;height:150%;left:-6%;top:-70%;background:hsl(var(--h1) 62% 40%);animation:au1 18s ease-in-out infinite alternate}
.pf-cover.aurora>i.au:nth-of-type(2){width:40%;height:140%;left:38%;top:-80%;background:hsl(var(--h2) 60% 44%);opacity:.45;animation:au2 22s ease-in-out infinite alternate}
.pf-cover.aurora>i.au:nth-of-type(3){width:38%;height:130%;right:-6%;top:-40%;background:hsl(var(--h3) 58% 46%);opacity:.4;animation:au1 26s ease-in-out infinite alternate-reverse}
@keyframes au1{to{transform:translate(12%,18%) scale(1.15)}}
@keyframes au2{to{transform:translate(-14%,22%) scale(.9)}}
@media (max-width:760px), (hover:none) and (pointer:coarse){
  .pf-cover.aurora>i.au{animation:none;filter:none;opacity:.75}
  .pf-cover.aurora>i.au:nth-of-type(1){background:radial-gradient(closest-side,hsl(var(--h1) 72% 42%),transparent)}
  .pf-cover.aurora>i.au:nth-of-type(2){background:radial-gradient(closest-side,hsl(var(--h2) 70% 45%),transparent)}
  .pf-cover.aurora>i.au:nth-of-type(3){background:radial-gradient(closest-side,hsl(var(--h3) 65% 48%),transparent)}
  /* вход: мягкие пятна вместо твёрдых кругов (размытие на телефоне выключено ради скорости) */
  .aa-orb.o1{background:radial-gradient(closest-side,rgba(31,199,126,.85),transparent)!important}
  .aa-orb.o2{background:radial-gradient(closest-side,rgba(139,124,245,.85),transparent)!important}
}
/* работы студии на узком экране: две равные колонки, длинный текст не распирает сетку */
@media (max-width:420px){.ow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* маркет: левая верхняя карточка не прячется за «Гарантом» */
@media (max-width:1500px){.card3d.k1{inset-inline-start:-4%;top:3%}}
@media print{.rv{opacity:1!important;animation:none!important}}

/* 3D-наклон карточек за курсором */
.lot2.tilt,.ow-cover.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-5px);transition:transform .12s linear,box-shadow .35s,border-color .35s}
.lot2.tilt::after,.ow-cover.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 45%);mix-blend-mode:soft-light}
.ow-cover{will-change:transform}
/* название работы не вылезает за карточку, когда подпись встаёт в столбик */
.ow-meta>.ow-info{max-width:100%}
@media (max-width:560px){.og-stats .pf-stat span{font-size:10px;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}