/* ===== Doberman.ru — главная (/enter) ===== */

:root{
  --purple:#6c5ce7;        /* основной фиолетовый (кнопки) */
  --purple-soft:#8b9bf4;   /* «лапки» */
  --orange:#f5a623;        /* «сердца» */
  --ink:#1e2230;           /* основной текст */
  --muted:#6b7280;         /* серый текст */
  --line:#eceef3;          /* границы карточек */
  --bg:#fcfcfc;
  --bg-soft:#f6f7fb;
  --radius:18px;
  --shadow:0 10px 30px rgba(30,34,48,.06);
  --shadow-lg:0 24px 60px rgba(30,34,48,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
html{background:#0e0f14} /* цвет футера — чтобы низ под футером (overscroll/safe-area на iPhone) был тёмным */
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1280px;margin:0 auto;padding:0 32px}

/* ===== Кнопки ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:15px;line-height:1;
  border-radius:14px;padding:13px 22px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:17px 28px;font-size:16px;border-radius:16px}

.btn-primary{
  background:linear-gradient(135deg,#7b6ef0,#6c5ce7);
  color:#fff;box-shadow:0 8px 20px rgba(108,92,231,.30);
}
.btn-primary:hover{box-shadow:0 12px 26px rgba(108,92,231,.40)}

.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-soft)}

.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:#d7dbe6;box-shadow:var(--shadow)}
.play-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--purple);color:#fff;
}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:background .15s ease;
}
.icon-btn:hover{background:var(--bg-soft)}

/* ===== Шапка ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;gap:24px;height:84px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px}
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,#8b7bf5,#6c5ce7);
}
.main-nav{display:flex;align-items:center;gap:30px;margin:0 auto}
.main-nav a{font-weight:500;color:var(--muted);font-size:15px;padding:6px 0;position:relative}
.main-nav a:hover{color:var(--ink)}
.main-nav a.active{color:var(--ink);font-weight:600}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--purple);
}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}

/* ===== Hero ===== */
.hero{padding:30px 0 10px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:0px;align-items:center}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#eef0fe;color:var(--purple);
  font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;margin-bottom:26px;
}
.hero-title{
  font-size:clamp(34px,4vw,56px);font-weight:800;line-height:1.08;letter-spacing:-.01em;margin-bottom:24px;
}
.accent-purple{color:var(--purple-soft)}
.accent-orange{
  background:linear-gradient(90deg,#f7b733,#f08a3c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-size:17px;color:var(--muted);max-width:440px;margin-bottom:32px}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}

.hero-features{list-style:none;display:flex;gap:34px;flex-wrap:wrap}
.hero-features li{display:flex;align-items:flex-start;gap:12px}
.hf-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
}
.hf-text{font-size:13px;color:var(--muted);line-height:1.4}
.hf-purple{background:#eef0fe;color:var(--purple)}
.hf-red{background:#fdecef;color:#ef5e7a}
.hf-green{background:#e9f7ef;color:#27ae74}

/* ===== Заглушка под фото ===== */
.hero-media{
  position:relative;border-radius:28px;overflow:hidden;min-height:560px;
  background:var(--bg-soft);box-shadow:var(--shadow-lg);
}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-media-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  color:#aeb4c4;text-align:center;font-size:14px;
  border:2px dashed #d7dbe6;border-radius:28px;
}
/* когда есть картинка — прячем placeholder */
.hero-media:not(.is-empty) .hero-media-placeholder{display:none}

/* ===== Возможности (6 блоков на всю ширину) ===== */
.features{padding:0px 0 90px}
.section-title{text-align:center;font-size:clamp(26px,2.6vw,34px);font-weight:800;margin-bottom:44px}
.feature-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.feature-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:30px 26px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
/* лёгкая цветная подсветка сверху карточки на ховере */
.feature-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--card-grad);opacity:0;transition:opacity .2s ease;
}
.feature-card:hover::before{opacity:1}
.feature-card h3{font-size:17px;font-weight:700;line-height:1.4;color:var(--ink);margin:0}

/* крутые градиентные иконки */
.fc-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:17px;color:#fff;flex:0 0 auto;
  background:var(--card-grad);
  box-shadow:0 10px 22px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease;
}
.feature-card:hover .fc-icon{transform:translateY(-2px) rotate(-3deg) scale(1.05)}

.grad-violet  {--card-grad:linear-gradient(135deg,#8b7bf5,#6c5ce7);--card-glow:rgba(108,92,231,.35)}
.grad-teal    {--card-grad:linear-gradient(135deg,#3ad1c4,#16a394);--card-glow:rgba(22,163,148,.35)}
.grad-amber   {--card-grad:linear-gradient(135deg,#ffb74a,#f5901f);--card-glow:rgba(245,144,31,.35)}
.grad-rose    {--card-grad:linear-gradient(135deg,#ff7ea6,#ec4070);--card-glow:rgba(236,64,112,.35)}
.grad-blue    {--card-grad:linear-gradient(135deg,#5aa9ff,#2f74f0);--card-glow:rgba(47,116,240,.35)}
.grad-fuchsia {--card-grad:linear-gradient(135deg,#d07bff,#a233e6);--card-glow:rgba(162,51,230,.35)}
/* чтобы ::before на ховере знал градиент карточки — берём с иконки */
.feature-card:has(.grad-violet) {--card-grad:linear-gradient(90deg,#8b7bf5,#6c5ce7)}
.feature-card:has(.grad-teal)   {--card-grad:linear-gradient(90deg,#3ad1c4,#16a394)}
.feature-card:has(.grad-amber)  {--card-grad:linear-gradient(90deg,#ffb74a,#f5901f)}
.feature-card:has(.grad-rose)   {--card-grad:linear-gradient(90deg,#ff7ea6,#ec4070)}
.feature-card:has(.grad-blue)   {--card-grad:linear-gradient(90deg,#5aa9ff,#2f74f0)}
.feature-card:has(.grad-fuchsia){--card-grad:linear-gradient(90deg,#d07bff,#a233e6)}

/* ===== Подвал ===== */
.site-footer{
  background:#0e0f14;
  background-image:none;
  color:#c7c9d4;
  margin-top:20px;
}
.footer-top{
  display:grid;grid-template-columns:1.8fr 1fr 1.4fr 1fr;gap:40px;
  padding:60px 32px 44px;
}
.footer-brand{max-width:340px}
.footer-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;margin-bottom:16px}
.footer-logo img{width:30px;height:auto}
.footer-tagline{font-size:14px;line-height:1.6;color:#9a9db0;margin-bottom:20px}
.footer-social{display:flex;gap:10px}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;color:#c7c9d4;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.footer-social a:hover{background:var(--purple);color:#fff;transform:translateY(-2px)}

.footer-col h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:16px;letter-spacing:.02em}
.footer-col a,.footer-col .footer-muted{
  display:block;font-size:14px;color:#9a9db0;line-height:2.1;transition:color .15s ease;
}
.footer-col a:hover{color:#fff}
.footer-muted{color:#6c6f80}

.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;
  padding:20px 32px 28px;border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;color:#7d8094;
}
.footer-bottom p{margin:0}
.footer-legal{color:#6c6f80}
.footer-visitors{color:#9a9db0;font-weight:500}
.footer-visitors b{color:#fff;font-weight:700}
.footer-age{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;
  font-size:11px;font-weight:700;color:#c7c9d4;border:1px solid rgba(255,255,255,.18);
}

/* ===== Модалка (popup) ===== */
.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-overlay{
  position:absolute;inset:0;background:rgba(14,15,20,.55);
  backdrop-filter:blur(3px);animation:modalFade .2s ease both;
}
.modal-dialog{
  position:relative;z-index:1;width:100%;max-width:680px;max-height:85vh;
  background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  animation:modalPop .25s cubic-bezier(.2,.8,.25,1) both;
}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:background .15s ease;
}
.modal-close:hover{background:var(--bg-soft)}
.modal-body{
  overflow-y:auto;padding:40px 40px 36px;
}
.modal-body h2{font-size:24px;font-weight:800;margin-bottom:6px;padding-right:40px}
.modal-upd{font-size:13px;color:var(--muted);margin-bottom:22px}
.modal-body h3{font-size:16px;font-weight:700;margin:22px 0 8px}
.modal-body p{font-size:14px;line-height:1.65;color:#4a4f60;margin-bottom:10px}
.modal-body a{color:var(--purple);text-decoration:underline}
body.modal-open{overflow:hidden}

@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* ===== Модалка авторизации ===== */
.auth-card{
  position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;
  width:100%;max-width:860px;max-height:92vh;overflow:hidden;
  background:#fff;border-radius:26px;box-shadow:0 40px 90px rgba(20,20,40,.35);
  animation:authCard .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes authCard{
  0%{opacity:0;transform:translateY(30px) scale(.94);filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.modal-auth .modal-close{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.12)}
.modal-auth .modal-close:hover{background:rgba(255,255,255,.22)}

/* Левая брендовая панель */
.auth-aside{
  position:relative;overflow:hidden;color:#fff;padding:42px 36px;
  display:flex;align-items:center;
  background:linear-gradient(150deg,#7b6ef0 0%,#6c5ce7 45%,#5b3fd6 100%);
}
.auth-aside-inner{position:relative;z-index:2;animation:authAside .6s .1s ease both}
@keyframes authAside{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.auth-logo{width:46px;height:auto;margin-bottom:18px}
.auth-aside h3{font-size:24px;font-weight:800;margin-bottom:10px}
.auth-aside p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:24px}
.auth-perks{list-style:none;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.95)}
.auth-perks li span{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;background:rgba(255,255,255,.16);font-size:15px;
}
/* декоративные «орбы» */
.auth-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;z-index:1}
.auth-orb-1{width:160px;height:160px;background:rgba(255,255,255,.18);top:-40px;right:-50px;animation:orbFloat 6s ease-in-out infinite}
.auth-orb-2{width:110px;height:110px;background:rgba(180,160,255,.35);bottom:-30px;left:-30px;animation:orbFloat 7s ease-in-out infinite reverse}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Правая часть с формами */
.auth-main{position:relative;padding:46px 44px;overflow-y:auto}
.auth-view{display:none}
.auth-view.is-active{display:block}
.auth-view h2{font-size:25px;font-weight:800;margin-bottom:6px}
.auth-sub{font-size:14px;color:var(--muted);margin-bottom:26px}

.auth-field{display:block;margin-bottom:16px}
.auth-field > span{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.auth-field input[type=email],
.auth-field input[type=password],
.auth-field input[type=text],
.auth-field input[type=date],
.auth-field select,
.auth-field textarea{
  width:100%;min-width:0;max-width:100%;font:inherit;font-size:16px;color:var(--ink); /* 16px — чтобы iOS не зумил при фокусе */
  padding:13px 15px;border:1.5px solid var(--line);border-radius:13px;background:#fbfbfd;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.auth-field textarea{resize:vertical;min-height:90px;line-height:1.5}
/* iOS: у date-инпута своя нативная ширина — сбрасываем, чтобы не вылезал за экран */
.auth-field input[type=date]{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.auth-field input[type=date]::-webkit-date-and-time-value{text-align:left}
.auth-field select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus{
  outline:none;border-color:var(--purple);background:#fff;
  box-shadow:0 0 0 4px rgba(108,92,231,.14);
}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 22px}
.auth-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.auth-check input{accent-color:var(--purple);width:16px;height:16px}
.auth-check a{color:var(--purple)}
.auth-link{font-size:13px;color:var(--purple)}
.auth-submit{width:100%;justify-content:center;margin-top:4px}
.auth-switch{text-align:center;font-size:14px;color:var(--muted);margin-top:20px}
.auth-switch a{color:var(--purple);font-weight:600}
.auth-msg{
  font-size:13.5px;color:#d63b5b;background:#fdecef;border:1px solid #f7c9d4;
  padding:10px 13px;border-radius:11px;margin-bottom:16px;line-height:1.45;
}
.auth-msg--ok{color:#1c8a4a;background:#e8f7ee;border-color:#bfe6cd}
/* Страница установки нового пароля /reset */
.reset-wrap{max-width:440px;margin:40px auto}
.reset-card{padding:28px}
.reset-title{font-size:24px;font-weight:800;margin-bottom:6px}
/* Опасная зона в «Редактировать профиль» — удаление аккаунта */
.ep-danger{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.ep-delete{border:1px solid #f0c2cd;background:#fff;color:#e0395b;font:inherit;font-size:14px;font-weight:700;padding:11px 20px;border-radius:12px;cursor:pointer}
.ep-delete:hover{background:#fdecef}
.ep-delete:disabled{opacity:.6;cursor:default}
.ep-danger-note{margin-top:10px;font-size:12px;line-height:1.45;color:var(--muted)}

/* чип залогиненного пользователя в шапке */
.user-chip{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--ink);min-width:0}
.user-chip .user-ava{flex:0 0 auto}
.user-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.2;max-width:160px;overflow-wrap:anywhere;
}
.user-ava{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;color:#fff;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,#8b7bf5,#6c5ce7);
}
img.user-ava{object-fit:cover}

/* поэтапное появление полей активной формы */
.auth-view.is-active > *{animation:authField .5s both;opacity:0}
.auth-view.is-active > *:nth-child(1){animation-delay:.05s}
.auth-view.is-active > *:nth-child(2){animation-delay:.10s}
.auth-view.is-active > *:nth-child(3){animation-delay:.16s}
.auth-view.is-active > *:nth-child(4){animation-delay:.22s}
.auth-view.is-active > *:nth-child(5){animation-delay:.28s}
.auth-view.is-active > *:nth-child(6){animation-delay:.34s}
.auth-view.is-active > *:nth-child(7){animation-delay:.40s}
@keyframes authField{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

a.user-chip{cursor:pointer}

/* ===== Страница профиля (новый дизайн) ===== */
.pf-body{background:#f4f5f8}
.pf-header{background:rgba(255,255,255,.9)} /* как у .site-header — прозрачный блюр (blur наследуется) */
.pf-nav{display:flex;gap:28px;margin:0 auto}
.pf-nav a{font-size:15px;font-weight:500;color:var(--muted)}
.pf-nav a:hover{color:var(--ink)}
.pf-page{padding:10px 0 10px}
.pf-page .container{display:flex;flex-direction:column;gap:10px}

/* карточки общие */
.pf-card,.pf-stats,.pf-block,.pf-panel,.pf-invite{
  background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
}

/* верхняя карточка */
.pf-card{
  display:grid;grid-template-columns:210px 1fr 340px;
  grid-template-areas:"avatar info stats" "avatar bio stats";
  gap:0 30px;padding:30px;align-items:stretch;
}
.pf-card.has-follow{grid-template-areas:"avatar info stats" "avatar follow stats" "avatar bio stats"}
.pf-id-text{grid-area:info;min-width:0}
.pf-card > *{min-width:0}            /* не даём длинному контенту распирать колонки */
.pf-id{display:flex;gap:26px}

/* правый столбец карточки — статистика в 2 столбика, плитки тянутся на всю высоту */
.pf-side{grid-area:stats;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;border-left:1px solid var(--line);padding-left:28px}
.pf-side-stat{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fbfbfd;min-width:0}
.pf-side-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#eef0fe;font-size:17px;flex:0 0 auto}
.pf-side-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pf-side-num{font-size:18px;font-weight:800}
.pf-side-label{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-avatar{grid-area:avatar;position:relative;align-self:stretch;width:100%;min-height:230px;border-radius:20px;overflow:hidden}
.pf-avatar-init{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:230px;border-radius:20px;
  font-size:68px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8b7bf5,#6c5ce7);
}
.pf-avatar-img{width:100%;height:100%;border-radius:20px;object-fit:cover;display:block}
/* аватар-кнопка с оверлеем */
.pf-avatar--btn{padding:0;border:none;background:none;cursor:pointer;display:block}
.pf-avatar-overlay{
  position:absolute;inset:0;border-radius:20px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:rgba(20,20,40,.5);color:#fff;font-size:13px;font-weight:600;
  opacity:0;transition:opacity .18s ease;
}
.pf-avatar--btn:hover .pf-avatar-overlay,
.pf-avatar--btn:focus-visible .pf-avatar-overlay{opacity:1}
.pf-id-text h1{font-size:30px;font-weight:800;line-height:1.1;overflow-wrap:anywhere;word-break:break-word}
.pf-loc{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;margin-top:8px}
.pf-meta{color:var(--muted);font-size:14px;margin-top:4px}
.pf-quote{
  grid-area:bio;
  position:relative;margin-top:16px;background:#f6f7fb;border-radius:12px;
  padding:14px 16px 14px 34px;font-size:14px;color:#54596b;line-height:1.5;max-width:430px;
  /* длинный текст не растягивает карточку — ограничиваем по высоте и скроллим */
  max-height:127px;overflow-y:auto;overflow-wrap:anywhere;
  scrollbar-width:thin;scrollbar-color:#c9cdd9 transparent;
}
.pf-quote::-webkit-scrollbar{width:6px}
.pf-quote::-webkit-scrollbar-thumb{background:#c9cdd9;border-radius:6px}
.pf-quote-mark{position:absolute;left:12px;top:8px;font-size:26px;color:var(--purple);font-weight:800}
.pf-name-edit{margin-left:8px;border:none;background:none;color:var(--muted);font-size:18px;cursor:pointer;vertical-align:middle}
.pf-name-edit:hover{color:var(--purple)}
.pf-fill{color:var(--purple);cursor:pointer;font-weight:600}
.pf-muted{color:var(--muted)}
.ef-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ef-row > *{min-width:0}

/* ===== Комбобокс с поиском (добавление питомца) ===== */
.auth-hint{font-weight:400;color:var(--muted);font-size:12px}
.cbx{position:relative}
.cbx-list{
  position:absolute;top:100%;left:0;right:0;z-index:6;margin-top:6px;
  max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--line);
  border-radius:13px;box-shadow:var(--shadow-lg);
}
.cbx-opt{
  display:block;width:100%;text-align:left;border:none;background:#fff;cursor:pointer;
  font:inherit;font-size:15px;color:var(--ink);padding:11px 14px;
}
.cbx-opt:hover{background:var(--bg-soft)}
.cbx-opt + .cbx-opt{border-top:1px solid #f1f2f6}
.cbx-pet{display:flex;flex-direction:column;gap:2px}
.cbx-pet small{font-size:12px;color:var(--muted)}
/* модалка с выпадающим списком, который должен выходить за её пределы */
.modal-dialog.modal-of{overflow:visible}
.modal-dialog.modal-of .modal-body{overflow:visible}
@media (max-width:680px){.ef-row{grid-template-columns:1fr}}

/* ===== Кроп аватара ===== */
.crop-dialog{max-width:420px}
.crop-stage{
  position:relative;width:320px;max-width:100%;height:320px;margin:18px auto 0;
  background:#15161c;border-radius:14px;overflow:hidden;cursor:grab;touch-action:none;user-select:none;
}
.crop-stage:active{cursor:grabbing}
.crop-stage #cropImg{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;pointer-events:none;max-width:none}
.crop-ring{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,20,40,.55);
  border-radius:20px;border:2px solid rgba(255,255,255,.85);
}
.crop-zoom{display:flex;align-items:center;gap:12px;margin:18px 2px 22px;color:var(--muted)}
.crop-zoom input[type=range]{flex:1;accent-color:var(--purple);cursor:pointer}
#cropSave{width:100%;justify-content:center}

.pf-coowners-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:14px}
.pf-i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:#eef0fe;color:var(--purple);font-size:11px;font-style:normal;font-weight:700}
.pf-add-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:128px;border:2px dashed #d7dbe6;border-radius:14px;background:#fbfbfd;
  color:var(--muted);font-size:13px;text-align:center;cursor:pointer;line-height:1.3;
}
.pf-add-box:hover{border-color:var(--purple);color:var(--purple)}
.pf-add-box--empty{cursor:default}
.pf-add-plus,.pet-add-plus{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:#eef0fe;color:var(--purple);font-size:22px;font-weight:600;
}

/* статистика */
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:6px 0}
.pf-stat{display:flex;align-items:center;gap:14px;padding:20px 26px}
.pf-stat + .pf-stat{border-left:1px solid var(--line)}
.pf-stat-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;font-size:20px}
.pf-stat div{display:flex;flex-direction:column;line-height:1.15}
.pf-stat b{font-size:22px;font-weight:800}
.pf-stat span{font-size:13px;color:var(--muted)}
.st-purple{background:#eef0fe}.st-amber{background:#fff3e3}.st-blue{background:#e9f1fe}.st-rose{background:#fdecef}

/* табы */
.pf-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);padding:0 4px}
.pf-tabs a{padding:14px 2px;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;position:relative}
.pf-tabs a.is-active{color:var(--purple)}
.pf-tabs a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--purple);border-radius:2px}

/* блок питомцев */
.pf-block{padding:26px}
.pf-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.pf-block-head h2{font-size:19px;font-weight:800}
.pf-add-btn{font-size:14px;padding:11px 18px}
.pf-pets{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pet-card{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s}
.pet-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.pet-del{
  position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:9px;
  border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(20,20,40,.45);color:#fff;opacity:0;transform:scale(.9);
  transition:opacity .15s ease,transform .15s ease,background .15s ease;
}
.pet-card:hover .pet-del{opacity:1;transform:scale(1)}
.pet-del:hover{background:#e0395b}
.pet-photo{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e7e9f3,#f0f1f7);font-size:56px;overflow:hidden}
.pet-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pet-menu{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:9px;border:none;
  background:rgba(255,255,255,.9);cursor:pointer;font-size:16px;line-height:1}
.pet-link{display:block;color:inherit}
.pet-body{padding:14px 16px 14px}

/* ===== Страница питомца /{id}/{petId} ===== */
.pet-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:14px;margin-bottom:4px}
.pet-back:hover{color:var(--purple)}
.petp-card{display:grid;grid-template-columns:320px 1fr;gap:30px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:24px}
.petp-photo{aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#e7e9f3,#f0f1f7);display:flex;align-items:center;justify-content:center;font-size:90px}
.petp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.petp-info{min-width:0}
.petp-info h1{font-size:30px;font-weight:800;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.petp-info .pet-male{font-size:24px}
.petp-sub{font-size:16px;color:var(--muted);margin:8px 0 20px}
.petp-facts{list-style:none;margin-bottom:20px}
.petp-facts li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.petp-facts li span{color:var(--muted)}
.petp-facts li b{font-weight:600;text-align:right}
.petp-stats{border-top:1px solid var(--line);padding-top:16px;gap:20px;flex-wrap:wrap}
.petp-stats span{font-size:14px}
@media (max-width:680px){
  .petp-card{grid-template-columns:1fr;gap:18px;padding:16px}
  .petp-photo{max-width:280px;margin:0 auto}
  .petp-info h1{font-size:24px}
}

/* ===== Страница питомца — соцлента ===== */
.pf-crumbs{font-size:13px;color:var(--muted);margin-bottom:4px}
.pf-crumbs a:hover{color:var(--purple)}
.pf-crumbs span{margin:0 6px}
.pf-crumbs b{color:var(--ink)}
.pet2{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
.pet2-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px}
.pet2-left{display:flex;flex-direction:column;gap:22px;position:sticky;top:94px;align-self:start;
  max-height:calc(100vh - 114px);overflow-y:auto;scrollbar-width:none}
.pet2-left::-webkit-scrollbar{display:none}
.pet2-photo{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#e7e9f3,#f0f1f7);display:flex;align-items:center;justify-content:center;font-size:80px;margin-bottom:16px}
.pet2-photo img{width:100%;height:100%;object-fit:cover}
.pet2-photo--btn{position:relative;padding:0;border:none;cursor:pointer;width:100%}
.pet2-photo--btn .pf-avatar-overlay{border-radius:16px}
.pet2-name{font-size:24px;font-weight:800;display:flex;align-items:center;gap:7px;overflow-wrap:anywhere}
.pet2-name .pet-male{font-size:20px}
.pet2-sub{font-size:14px;color:var(--muted);margin:6px 0 18px}
.pet2-facts{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.pet2-facts li{display:flex;align-items:flex-start;gap:11px}
.pf-i2{width:30px;height:30px;border-radius:9px;background:var(--bg-soft);display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.pet2-facts small{display:block;font-size:12px;color:var(--muted)}
.pet2-facts b{font-size:14px;font-weight:600}
.pet2-parents{border-top:1px solid var(--line);padding-top:16px;margin-bottom:18px}
.pet2-parents h4{font-size:14px;font-weight:700;margin-bottom:8px}
.pet2-parents ul{list-style:none}
.pet2-parents li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.pet2-parents li span{color:var(--muted)}
.pet2-parents li b{font-weight:600;text-align:right}
.pet2-parents a{color:var(--purple)}
.pet2-bio{border-top:1px solid var(--line);padding-top:16px;margin-bottom:18px}
.pet2-bio h4{font-size:14px;font-weight:700;margin-bottom:6px}
.pet2-bio p{font-size:14px;color:#54596b;line-height:1.6}
.pet2-btns{display:flex;flex-direction:column;gap:10px}
.pet2-btns .btn{width:100%;justify-content:center;gap:8px}
.pf-userfollow{grid-area:follow;justify-self:start;margin-top:16px;gap:8px;padding:11px 22px}
.pf-share{grid-area:follow;justify-self:start;margin-top:16px}
/* Единый вид кнопки «Поделиться профилем» с лапкой (профиль + страница питомца) */
.btn-share{gap:8px}
.btn-share img{width:18px;height:auto;display:block;flex:0 0 auto}
.pet-follow img{display:block}
.pet-follow.is-following{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
/* в состоянии «Отписаться» фон белый — показываем чёрный логотип (src меняется в разметке/JS) */
.pet-follow.is-following:hover{background:#fdecef;color:#e0395b;border-color:#f7c9d4}
.pet-followers{text-align:center;font-size:13px;color:var(--muted);margin-top:2px}
.pet-followers b{color:var(--ink);font-weight:700}
.pet2-parents-card h4{font-size:15px;font-weight:700;margin-bottom:14px}
.parent-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.parent-row + .parent-row{border-top:1px solid var(--line)}
.parent-role{width:54px;flex:0 0 auto;color:var(--muted);font-size:14px}
.parent-val{flex:1;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.parent-val a{color:var(--purple)}
.parent-muted{color:var(--muted);font-weight:400}
.parent-add{flex:1;text-align:left;border:1px dashed #d7dbe6;background:#fbfbfd;border-radius:10px;padding:9px 12px;color:var(--purple);font-weight:600;font-size:13px;cursor:pointer}
.parent-add:hover{border-color:var(--purple)}
.parent-edit{border:none;background:none;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline}
.parent-edit:hover{color:var(--purple)}
.pet2-owners h4{font-size:15px;font-weight:700;margin-bottom:14px}
.pet2-owner{display:flex;align-items:center;gap:11px;color:inherit}
.pet2-owner .ava{width:42px;height:42px}
.pet2-owner b{font-size:14px;font-weight:700;display:block}
.pet2-owner small{font-size:12px;color:var(--muted)}
.pet2-addco{margin-top:14px;width:100%;border:1px dashed #d7dbe6;background:#fbfbfd;border-radius:12px;padding:10px;color:var(--purple);font-weight:600;font-size:13px;cursor:pointer}
.pet2-addco:hover{border-color:var(--purple)}
.pet2-owner-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.pet2-owner-row .pet2-owner{flex:1;min-width:0}
.pet2-co-del{flex:0 0 auto;border:none;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 7px;border-radius:8px}
.pet2-co-del:hover{color:#e0455e;background:#fdecef}
.pet-coowned{position:absolute;top:8px;left:8px;z-index:2;font-size:10px;font-weight:700;color:var(--purple);background:#eef0fe;border-radius:999px;padding:2px 8px}

/* аватарки (универсальные) */
.ava{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  color:#fff;font-weight:700;font-size:15px;background:linear-gradient(135deg,#8b7bf5,#6c5ce7);object-fit:cover}

/* табы */

/* композер */
.composer{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;margin-bottom:18px}
.composer-top{display:flex;gap:12px;align-items:flex-start}
.composer-top textarea{flex:1;border:none;resize:none;font:inherit;font-size:15px;background:var(--bg-soft);border-radius:12px;padding:11px 14px;min-height:44px;outline:none}
.composer-top textarea:focus{box-shadow:0 0 0 3px rgba(108,92,231,.14)}
.composer-preview{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.composer-thumb{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden}
.composer-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.composer-rm{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(20,20,40,.6);color:#fff;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.composer-bar{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.composer-photo{display:inline-flex;align-items:center;gap:7px;border:none;background:none;cursor:pointer;color:var(--purple);font-weight:600;font-size:14px}
.composer-submit{margin-left:auto;font-size:14px;padding:11px 20px}

/* Композер в общей ленте: выбор питомца → поле текста/фото */
.feed-composer .fc-label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.fc-chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fc-chips::-webkit-scrollbar{display:none}
.fc-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:4px 13px 4px 4px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.fc-chip:hover{border-color:var(--purple-soft)}
.fc-chip.is-active{border-color:var(--purple);background:#eef0fe;color:var(--purple)}
.fc-chip-ava{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#8b7bf5,#6c5ce7);color:#fff;font-weight:700;font-size:14px}
.fc-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.feed-composer-empty{display:flex;align-items:center;gap:11px;color:var(--purple);font-weight:600;font-size:14px}
.feed-composer-empty:hover{background:var(--bg-soft)}
.feed-composer-empty .fc-add-ico{width:34px;height:34px;border-radius:50%;background:#eef0fe;display:inline-flex;
  align-items:center;justify-content:center;font-size:22px;font-weight:300;flex:0 0 auto}

/* лента */
.feed{display:flex;flex-direction:column;gap:10px}
.feed-empty{background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px 20px;text-align:center;color:var(--muted)}
/* Мини-рейтинг по лайкам (полоса аватарок) */
.rating-card{padding:14px 16px}
.rating-head{font-size:14px;font-weight:800;margin-bottom:12px}
.rating-strip{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px 4px}
.rating-strip::-webkit-scrollbar{display:none}
.rating-item{flex:0 0 auto;position:relative;display:block;width:62px;height:62px}
.rating-ava{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#e7e9f3,#f0f1f7);border:2px solid #fff;box-shadow:0 2px 8px rgba(30,34,48,.12)}
.rating-ava img{width:100%;height:100%;object-fit:cover;display:block}
.rating-ph{font-size:26px}
.rating-ava--top{border-color:#ffd24d;box-shadow:0 0 0 2px #ffd24d,0 2px 8px rgba(30,34,48,.14)}
.rating-likes{position:absolute;right:-4px;bottom:-3px;display:inline-flex;align-items:center;gap:2px;
  background:#fff;color:#e0395b;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:800;
  box-shadow:0 1px 4px rgba(0,0,0,.18)}
.rating-item:hover .rating-ava{transform:translateY(-2px);transition:transform .15s}
.feed-sentinel{display:flex;justify-content:center;align-items:center;min-height:40px;padding:10px}
.feed-spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--purple);border-radius:50%;opacity:0;transition:opacity .15s;animation:feedspin .8s linear infinite}
.feed-sentinel.is-loading .feed-spinner{opacity:1}
@keyframes feedspin{to{transform:rotate(360deg)}}
.post{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.post-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.post-head > div{min-width:0}
.post-head b{font-size:14px;font-weight:700;display:block;line-height:1.2}
.post-head small{display:block;font-size:12px;color:var(--muted);line-height:1.2;margin-top:3px;overflow-wrap:anywhere}
.post-text{font-size:15px;line-height:1.55;color:var(--ink);margin-bottom:12px;overflow-wrap:anywhere}
.post-gallery{display:grid;gap:6px;border-radius:14px;overflow:hidden;margin-bottom:12px}
.post-gallery img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1;cursor:zoom-in}
.post-gallery.g1{grid-template-columns:1fr}
.post-gallery.g1 img{aspect-ratio:auto;max-height:560px}

/* Лайтбокс: фото поста на весь экран + листание (свайп на телефоне, стрелки/клавиши на десктопе) */
.lbx{position:fixed;inset:0;z-index:1000;background:rgba(10,10,15,.94);display:flex;align-items:center;justify-content:center}
.lbx[hidden]{display:none} /* иначе display:flex перебивает атрибут hidden и окно не закрывается */

/* Колокольчик уведомлений */
.notif{position:relative}
.notif-bell{position:relative;border:none;background:none;cursor:pointer;color:var(--ink);width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.notif-bell:hover{background:var(--bg-soft)}
.notif-badge{position:absolute;top:3px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#e0395b;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:88vw;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:60;overflow:hidden}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;font-weight:800;font-size:15px;border-bottom:1px solid var(--line)}
.notif-clear{border:none;background:none;cursor:pointer;color:var(--purple);font:inherit;font-size:13px;font-weight:600;padding:2px 4px}
.notif-clear:hover{color:#5a4bd4}
.notif-list{max-height:300px;overflow-y:auto;scrollbar-width:thin} /* ~5 уведомлений, дальше прокрутка */
.notif-item{display:flex;gap:11px;align-items:center;padding:11px 16px;color:inherit}
.notif-item + .notif-item{border-top:1px solid var(--line)}
.notif-item:hover{background:var(--bg-soft)}
.notif-ava{width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8b7bf5,#6c5ce7);color:#fff;font-weight:700;font-size:15px}
.notif-body{display:flex;flex-direction:column;min-width:0}
.notif-text{font-size:14px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.notif-ago{font-size:12px;color:var(--muted);margin-top:2px}
.notif-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:14px}
/* На мобильном колокольчик не у правого края (правее — чип юзера) → панель крепим к экрану, а не к кнопке */
@media (max-width:680px){
  .notif-panel{position:fixed;left:12px;right:12px;top:90px;width:auto;max-width:none}
}

/* Тост-уведомление (гостям: лайк/комментарий → регистрация) */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:1100;
  display:flex;align-items:center;gap:14px;max-width:calc(100vw - 28px);
  background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-lg);
  font-size:14px;line-height:1.35;transition:transform .3s ease,opacity .3s ease;opacity:0}
.toast.is-show{transform:translate(-50%,0);opacity:1}
.toast-btn{flex:0 0 auto;background:var(--purple);color:#fff;font-weight:700;font-size:13px;
  padding:8px 16px;border-radius:999px;white-space:nowrap}
.toast-btn:hover{background:#5a4bd4}
.lbx-img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lbx-close{position:absolute;top:14px;right:16px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lbx-prev{left:14px}
.lbx-next{right:14px}
.lbx-close:hover,.lbx-nav:hover{background:rgba(255,255,255,.3)}
.lbx-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:600;background:rgba(0,0,0,.45);padding:5px 12px;border-radius:999px}
@media (max-width:680px){ .lbx-nav{display:none} } /* на телефоне листаем свайпом */
.post-gallery.g2{grid-template-columns:1fr 1fr}
.post-gallery.g3{grid-template-columns:repeat(3,1fr)}
.post-gallery.g4{grid-template-columns:1fr 1fr}
.post-actions{display:flex;gap:22px;align-items:center}
.post-actions button{display:inline-flex;align-items:center;gap:7px;border:none;background:none;cursor:pointer;color:var(--muted);font-size:14px;font-weight:600}
.post-like .heart-empty{color:#9a9db0;transition:transform .15s ease}
.post-like .heart-full{display:none;color:#ec4070;transition:transform .15s ease}
.post-like.is-liked{color:#ec4070}
.post-like.is-liked .heart-empty{display:none}
.post-like.is-liked .heart-full{display:inline-block}
.post-like:active svg{transform:scale(1.2)}
.post-cmt:hover,.post-like:hover{color:var(--ink)}
.post-comments{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cmt-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.cmt{display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere}
.cmt-ava{width:32px;height:32px;flex:0 0 auto;font-size:13px}
.cmt-body{display:flex;flex-direction:column;background:var(--bg-soft);border-radius:12px;padding:8px 12px;min-width:0}
.cmt-del{margin-left:auto;flex:0 0 auto;align-self:center;border:none;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;opacity:.5}
.cmt-del:hover{opacity:1;color:#e0455e}
.cmt-meta{font-size:12px;color:var(--muted)}
.cmt-meta b{color:var(--ink);font-weight:700}
.cmt-meta em{font-style:normal}
.cmt-text{font-size:14px;line-height:1.45;color:#3b3f4d;margin-top:2px}
.cmt-form{display:flex;gap:8px}
.cmt-form input{flex:1;font:inherit;font-size:14px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:#fbfbfd;outline:none}
.cmt-form input:focus{border-color:var(--purple);background:#fff}
.cmt-form button{width:42px;border:none;border-radius:11px;background:var(--purple);color:#fff;cursor:pointer;font-size:18px}

@media (max-width:880px){
  .pet2{grid-template-columns:1fr}
  .pet2-left{position:static;top:auto;max-height:none;overflow:visible} /* в одну колонку не фиксируем */
}
/* На мобильных шрифт инпутов ≥16px — иначе iOS зумит страницу при фокусе */
@media (max-width:768px){
  .cmt-form input{font-size:16px}
  .hf-finput{font-size:16px}
  .composer-top textarea{font-size:16px}
}

/* ===== Домашняя лента /enter (3 колонки) ===== */
.pf-page .container.hf{display:grid;grid-template-columns:260px minmax(0,1fr) 260px;gap:10px;align-items:start}
.hf-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.hf-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hf-card-head h4{font-size:16px;font-weight:800}
.hf-badge{font-size:12px;font-weight:700;color:var(--purple);background:#eef0fe;border-radius:999px;padding:2px 9px}
.hf-join h4{font-size:16px;font-weight:800;margin-bottom:10px}
.hf-join-btn{width:100%;justify-content:center;margin-top:10px}
.feed-aside-empty{font-size:13px;line-height:1.5;color:var(--muted)}
.feed-aside-empty a{color:var(--purple);font-weight:600}

/* левая и правая колонки — закреплены, не прокручиваются с лентой */
.hf-left,.hf-right{position:sticky;top:94px;max-height:calc(100vh - 114px);overflow:auto;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:none}
.hf-left::-webkit-scrollbar,.hf-right::-webkit-scrollbar{display:none}
.hf-center{display:flex;flex-direction:column;gap:10px;min-width:0}

/* Подписки */
.hf-sub-list{display:flex;flex-direction:column;gap:4px}
.hf-sub{display:flex;align-items:center;gap:11px;color:inherit;padding:7px;border-radius:12px}
.hf-sub:hover{background:var(--bg-soft)}
.hf-sub-ava{width:38px;height:38px;flex:0 0 auto;font-size:15px}
.hf-sub-text{min-width:0}
.hf-sub-text b{font-size:14px;font-weight:700;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-sub-text small{display:block;font-size:12px;color:var(--muted);line-height:1.2;margin-top:3px}
.hf-sub-add b{color:var(--purple)}
.hf-sub-addico{background:#eef0fe;color:var(--purple)}
/* Сворачиваемый блок (мои питомцы / подписки). На десктопе всегда раскрыт. */
.hf-coll-head{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:0;margin-bottom:14px;font:inherit;color:var(--ink);text-align:left;cursor:default}
.hf-coll-head h4{font-size:16px;font-weight:800;color:var(--ink)}
.hf-coll-head .hf-badge{margin-left:auto}
.hf-mini-stack{display:none}
.hf-mini-ava{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:linear-gradient(135deg,#8b7bf5,#6c5ce7);color:#fff;font-size:13px;flex:0 0 auto}
.hf-mini-ava + .hf-mini-ava{margin-left:-9px}
.hf-coll-chev{display:none}
.hf-showall{display:block;margin-top:10px;padding:9px;text-align:center;font-size:13px;font-weight:700;color:var(--ink);
  background:var(--bg-soft);border-radius:11px}
.hf-showall:hover{color:var(--purple)}

/* Посты */
.post-pet{flex:0 0 auto}
.post-pet-name{color:inherit}
.post-pet-name:hover{color:var(--purple)}
.post-verif{color:var(--purple);vertical-align:-2px;margin-left:3px}
.post-head .post-menu{border:none;background:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:8px}
.post-head .post-menu:hover{color:var(--ink);background:var(--bg-soft)}
.post-edit{margin-left:auto;border:none;background:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:8px;display:inline-flex}
.post-edit:hover{color:var(--purple);background:var(--bg-soft)}
.pe-text{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--bg-soft);outline:none;resize:vertical;min-height:90px}
.pe-text:focus{border-color:var(--purple);background:#fff}
.pe-delete{border:none;background:none;cursor:pointer;color:#e0455e;font:inherit;font-size:14px;font-weight:600;padding:6px 8px;border-radius:8px}
.pe-delete:hover{background:#fdecef}
.pe-delete:disabled{opacity:.6;cursor:default}

/* Фильтры */
.hf-reset{font-size:13px;font-weight:600;color:var(--purple)}
.hf-filters-top{display:flex;justify-content:flex-end;margin-bottom:6px}
.hf-filters-sum{display:none}
.hf-fsec{padding:14px 0;border-bottom:1px solid var(--line)}
.hf-fsec:first-of-type{padding-top:0}
.hf-flabel{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.hf-radio{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;font-size:14px;color:var(--muted)}
.hf-radio span{flex:1}
.hf-radio input{position:absolute;opacity:0;pointer-events:none}
.hf-radio i{width:18px;height:18px;border:2px solid var(--line);border-radius:50%;flex:0 0 auto;transition:.15s}
.hf-radio input:checked ~ i{border-color:var(--purple);background:radial-gradient(circle,var(--purple) 0 5px,#fff 6px)}
.hf-radio input:checked ~ span{color:var(--ink);font-weight:600}
.hf-finput{width:100%;font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none}
.hf-finput:focus{border-color:var(--purple-soft)}
.hf-finput::placeholder{color:var(--muted);font-weight:500}
.hf-finput:disabled{background:var(--bg-soft);color:var(--muted);cursor:not-allowed}
.hf-cbx .cbx-list{font-size:14px}
.hf-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink)}
.hf-toggle input{position:absolute;opacity:0;pointer-events:none}
.hf-toggle i{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;flex:0 0 auto;transition:.18s}
.hf-toggle i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s}
.hf-toggle input:checked ~ i{background:var(--purple)}
.hf-toggle input:checked ~ i::after{transform:translateX(18px)}

/* Адаптив домашней ленты */
@media (max-width:1180px){
  .pf-page .container.hf{grid-template-columns:240px minmax(0,1fr)}
  .hf-right{display:none}
}
@media (max-width:820px){
  .pf-page .container.hf{grid-template-columns:minmax(0,1fr)} /* не auto — иначе пост распирает страницу шире экрана */
  .hf-left{position:static;max-height:none;overflow:visible;min-width:0;flex-direction:row;flex-wrap:wrap}
  .hf-left>*{flex:1 1 240px;min-width:0}
  /* свёрнутые блоки: шапка с превью аватарок + стрелка, раскрытие по тапу */
  .hf-coll .hf-coll-head{cursor:pointer;margin-bottom:0}
  .hf-coll.is-open .hf-coll-head{margin-bottom:14px}
  .hf-coll .hf-mini-stack{display:inline-flex;margin-left:auto}
  .hf-coll .hf-coll-head .hf-badge{margin-left:10px}
  .hf-coll .hf-coll-chev{display:block;color:var(--muted);margin-left:2px;transition:transform .2s ease}
  .hf-coll.is-open .hf-coll-chev{transform:rotate(180deg)}
  .hf-coll .hf-coll-body{display:none}
  .hf-coll.is-open .hf-coll-body{display:block}
  /* блок «Фильтры» показываем на мобильном под «мои питомцы/подписки» (после .hf-left, перед лентой) */
  .hf-right{display:flex;position:static;max-height:none;overflow:visible;min-width:0;order:1}
  .hf-center{order:2}
  .hf-coll .hf-filters-sum{display:block;margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58%}
  .hf-coll .hf-filters-sum.is-set{color:var(--purple)}
}

/* ===== Каталог питомцев /catalog ===== */
.cat-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.cat-title{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cat-count{font-size:14px;font-weight:700;color:var(--purple);background:#eef0fe;border-radius:999px;padding:2px 12px}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px}
.cat-chips--breed{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.cat-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.cat-chip:hover{border-color:var(--purple);color:var(--purple)}
.cat-chip.is-active{background:var(--purple);color:#fff;border-color:var(--purple)}
.cat-chip i{font-style:normal;opacity:.7;font-size:12px}
.cat-chip.is-active i{opacity:.9}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-pet{display:block;color:inherit;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .15s,transform .15s}
.cat-pet:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.cat-pet-photo{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e7e9f3,#f0f1f7);font-size:46px;overflow:hidden}
.cat-pet-photo img{width:100%;height:100%;object-fit:cover}
.cat-pet-body{padding:12px 14px}
.cat-pet-body b{display:block;font-size:15px;font-weight:700}
.cat-pet-body span{font-size:13px;color:var(--muted)}
@media (max-width:880px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.pet-body h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px}
.pet-male{color:#3b82f6;font-size:15px}
.pet-breed{font-size:13px;color:var(--muted);margin:4px 0 10px}
.pet-facts{list-style:none;display:flex;flex-direction:column;gap:4px}
.pet-facts li{font-size:13px;color:#54596b;display:flex;align-items:center;gap:6px}
.pet-facts li span{font-size:13px}
.pet-facts li.pet-death{color:var(--muted)}
.pet-stats{display:flex;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pet-stats span{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.pet-stats svg{color:var(--muted)}
.pet-card--memory{opacity:.92}
.pet-card--memory .pet-photo{filter:grayscale(.35)}
/* пикер фото в форме добавления питомца */
.pet-photo-pick{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pet-photo-preview{
  width:72px;height:72px;border-radius:16px;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  background:var(--bg-soft);border:1px solid var(--line);
}
.pet-photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.pet-tags{display:flex;flex-wrap:wrap;gap:6px}
.pet-tag{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:7px}
.tag-0{background:#e9f7ef;color:#27ae74}.tag-1{background:#eef0fe;color:#6c5ce7}.tag-2{background:#e9f1fe;color:#3b82f6}
.pet-actions{display:flex;border-top:1px solid var(--line);margin-top:12px}
.pet-actions button{flex:1;padding:11px;border:none;background:#fff;cursor:pointer;font-size:15px;color:var(--muted)}
.pet-actions button:hover{background:var(--bg-soft)}
.pet-actions button + button{border-left:1px solid var(--line)}
.pet-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:2px dashed #d7dbe6;border-radius:16px;background:#fbfbfd;color:var(--muted);
  font-size:14px;text-align:center;cursor:pointer;line-height:1.3;min-height:280px;
}
.pet-add:hover{border-color:var(--purple);color:var(--purple)}
.pf-more{display:block;margin:22px auto 0;padding:11px 22px;border:1px solid var(--line);border-radius:12px;
  background:#fbfbfd;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.pf-more:hover{background:var(--bg-soft)}

/* обо мне + достижения */
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pf-panel{padding:26px}
.pf-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pf-panel-head h2{font-size:18px;font-weight:800}
.pf-edit{font-size:13px;padding:8px 14px}
.pf-link{font-size:13px;color:var(--purple);cursor:pointer;font-weight:600}
.pf-about{font-size:14px;color:#54596b;line-height:1.6;margin-bottom:18px}
.pf-facts{list-style:none}
.pf-facts li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.pf-facts li span{color:var(--muted)}
.pf-facts li b{font-weight:600;text-align:right}
.pf-ach{list-style:none;display:flex;flex-direction:column;gap:12px}
.pf-ach li{display:flex;align-items:center;gap:14px}
.pf-ach li.ach-locked{opacity:.55}
.ach-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;font-size:18px;flex:0 0 auto}
.ach-purple{background:#eef0fe;color:#6c5ce7}.ach-green{background:#e9f7ef;color:#27ae74}.ach-amber{background:#fff3e3;color:#f0962a}
.pf-ach li div{flex:1;display:flex;flex-direction:column}
.pf-ach li b{font-size:14px;font-weight:700}
.pf-ach li div span{font-size:13px;color:var(--muted)}
.pf-ach li em{font-size:12px;color:var(--muted);font-style:normal}

/* приглашение */
.pf-invite{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px}
.pf-invite-left{display:flex;align-items:center;gap:16px}
.pf-invite-ico{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;background:#eef0fe;font-size:22px}
.pf-invite-left b{display:block;font-size:16px;font-weight:700}
.pf-invite-left span{font-size:13px;color:var(--muted)}

/* ===== Адаптив ===== */
@media (max-width:1080px){
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .main-nav{display:none}
  .pf-nav{display:none}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1;max-width:none}
  .pf-pets{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero-media{min-height:420px;order:-1}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .auth-card{grid-template-columns:1fr;max-width:440px}
  .auth-aside{display:none}
  /* боковая панель скрыта — крестик на белом фоне делаем тёмным и видимым */
  .modal-auth .modal-close{color:var(--ink);border-color:var(--line);background:#fff;z-index:5}
  .modal-auth .modal-close:hover{background:var(--bg-soft)}
  .pf-card{grid-template-columns:1fr;grid-template-areas:"avatar" "info" "bio" "stats";gap:16px}
  .pf-card.has-follow{grid-template-areas:"avatar" "info" "follow" "bio" "stats"}
  .pf-userfollow,.pf-share{justify-self:stretch;justify-content:center;margin-top:0}
  .pf-side{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:16px}
  .pf-stats{grid-template-columns:repeat(2,1fr)}
  .pf-stat:nth-child(3){border-left:none}
  .pf-stat:nth-child(odd){border-left:none}
  .pf-two{grid-template-columns:1fr}
}
@media (max-width:680px){
  .container{padding:0 10px}
  .home .container{padding:0 20px}        /* на главной шире */
  .header-inner{padding-left:18px;padding-right:18px} /* шапку не меняем */
  .home .header-inner{padding-left:18px;padding-right:18px}
  .features{display:none} /* на мобиле блок фич скрыт */
  .header-actions .btn-ghost{display:none}
  .user-name{display:none} /* на мобильном в шапке только аватарка */
  .site-footer .footer-top{grid-template-columns:1fr;padding:44px 18px 32px}
  .site-footer .footer-bottom{flex-direction:column;align-items:flex-start;padding:20px 18px 28px}
  .modal{padding:0}
  .modal-dialog{max-width:none;max-height:100vh;height:100%;border-radius:0}
  .modal-body{padding:64px 20px 28px}
  .auth-card{max-width:none;max-height:100vh;height:100%;border-radius:0}
  .auth-main{padding:64px 22px 28px}
  .pf-id{flex-direction:column}
  .pf-pets{grid-template-columns:1fr}
  .pf-tabs{gap:18px;overflow-x:auto}
  .pf-invite{flex-direction:column;align-items:flex-start}
  /* компактный профиль: маленький аватар слева от имени, «о себе» и статистика снизу на всю ширину */
  .pf-card{grid-template-columns:auto 1fr;grid-template-areas:"avatar info" "bio bio" "stats stats";gap:14px 16px;padding:20px}
  .pf-card.has-follow{grid-template-areas:"avatar info" "follow follow" "bio bio" "stats stats"}
  .pf-avatar{align-self:start;width:88px;height:88px;min-height:0;border-radius:16px}
  .pf-avatar-init{width:88px;height:88px;min-height:0;border-radius:16px;font-size:34px}
  .pf-avatar-img{width:88px;height:88px;border-radius:16px}
  .pf-avatar-overlay{border-radius:16px;font-size:11px;gap:3px}
  .pf-id-text h1{font-size:22px}
  .pf-name-edit{font-size:24px;margin-left:6px;padding:2px 4px}
  .pet-del{opacity:1;transform:none} /* на мобиле нет ховера — крестик всегда виден */
  .pf-side{border-top:1px solid var(--line);padding-top:16px}
  .pf-quote{max-width:none;margin-top:0}
}
@media (max-width:460px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .pf-stats{grid-template-columns:1fr}
  .pf-stat{border-left:none!important}
}