/* ===================== PROFILE PAGE (clean, v3 + opacity) ===================== */

/* Base */
.p-profile{
  max-width:1100px;
  margin:0 auto;
  padding:var(--space-4,16px);
}
.muted{ color:var(--muted,#93a3b8); }

/* ===== Профиль: локальный акцент + фон мецената + уровни прозрачности ===== */
body.profile-body{
  /* по умолчанию акцент = обычный brand */
  --profile-accent: var(--brand,#7aa2ff);
  --profile-accent-soft: color-mix(in srgb, var(--profile-accent) 20%, transparent);
  --avatar-radius: 50%;
  --avatar-clip: none;

  /* значения по умолчанию, если в БД пусто */
  --profile-overlay-opacity: .65; /* затемнение поверх фоновой картинки */
  --profile-card-opacity:    .95; /* непрозрачность карточек на тёмных темах */

  /* сюда JS кладёт url(...) фоновой картинки мецената */
  --profile-bg-image: none;

  position: relative;
  z-index: 0;
}

/* если есть кастомный фон – базовый фон body убираем,
   сам фон и плёнку рисуем своими слоями */
body.profile-body.patron-has-bg{
  background: transparent !important;
}

/* Картинка мецената — самый дальний слой */
body.profile-body.patron-has-bg::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: var(--profile-bg-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Затемняющая плёнка над картинкой, но под всем контентом профиля.
   Прозрачность управляется profile_overlay_opacity (0–1 или 0–100). */
body.profile-body.patron-has-bg::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* чем меньше значение, тем ярче видна картинка мецената */
  background: rgb(3 7 18 / var(--profile-overlay-opacity, .65));
}

/* ===================== HERO ===================== */
.p-hero{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  margin-bottom:24px;
  isolation:isolate;
}
.p-hero__banner{
  height:240px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.p-hero__banner-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* overlay-контейнер прозрачен — баннер виден */
.p-hero__overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  background: transparent !important;
}

/* Стеклянная плашка + сетка ТОЛЬКО внутри .p-hero__inner */
.p-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding:16px 24px;
  margin:0 0 12px;          /* БЕЗ боковых отступов */
  border-radius:14px;

  background: rgba(12,16,28,var(--profile-overlay-opacity, .42));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 22px rgba(30,58,138,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  --hero-grid-size:36px;
}
.p-hero__inner::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.10) 0 1px, transparent 1px var(--hero-grid-size)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px var(--hero-grid-size));
  mix-blend-mode: overlay;
  opacity:.55;
}
body.light-theme .p-hero__inner::after{
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.12) 0 1px, transparent 1px var(--hero-grid-size)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px var(--hero-grid-size));
  mix-blend-mode: multiply;
  opacity:.5;
}

/* Левая часть */
.p-hero__left{ display:flex; align-items:center; gap:18px; }
.p-avatar{
  flex:0 0 auto;
  width:96px;
  height:96px;

  position:relative;
  overflow:hidden;

  border-radius: var(--avatar-radius, 50%);
  clip-path: var(--avatar-clip, none);

  background:var(--surface,#0f1420);
  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.p-avatar::before,
.p-avatar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  border-radius: inherit;
  clip-path: var(--avatar-clip, none);
}

.p-avatar::before{
  border:2px solid color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 70%, transparent);
  opacity:.95;
}
.p-avatar::after{
  border:1px solid rgba(255,255,255,.10);
  opacity:1;
}

.p-avatar__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  aspect-ratio:1 / 1;
  display:block;
  flex-shrink:0;
  border-radius:0;
}

.p-head{ display:flex; flex-direction:column; gap:6px; }
.p-name{ margin:0; font-size:1.6rem; font-weight:800; color:var(--text,#fff); }

/* Роли */
.role-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:9999px;
  font-weight:700; font-size:.82rem; border:1px solid transparent;
  box-shadow:inset 0 -1px rgba(0,0,0,.1);
}
.role--superadmin{ background:#fee2e2; color:#9f1239; border-color:#fecaca; }
.role--admin{      background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.role--moderator{  background:#ecfccb; color:#365314; border-color:#d9f99d; }
.role--support{    background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }
.role--user{       background:var(--surface-2,#141a27); color:var(--text,#dbe2ff); border-color:rgba(255,255,255,.06); }

/* Правая часть */
.p-hero__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.p-followers{ color:var(--muted,#93a3b8); }
.p-hero__actions .button.p-edit-btn{
  padding:10px 16px; border-radius:10px;
  background:linear-gradient(
    180deg,
    var(--profile-accent,var(--brand,#7aa2ff)),
    color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 70%, #000 30%)
  );
  color:#fff;
  border:1px solid color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 60%, #000 40%);
  box-shadow:0 10px 20px rgba(59,130,246,.3);
  transition:box-shadow .15s ease, transform .15s ease;
}
.p-hero__actions .button.p-edit-btn:hover{
  box-shadow:0 12px 28px rgba(59,130,246,.4);
  transform:translateY(-1px);
}

/* Адаптив */

@media (max-width:720px){
  .p-hero__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    --hero-grid-size: 32px;
  }

  .p-avatar,
  .p-avatar__img{
    width: 84px;
    height: 84px;
  }

  /* Профиль: баннер наверху, шапка сразу под ним */
  .profile-body .p-hero{
    overflow: visible; /* на всякий случай, чтобы ничего не обрезалось */
  }

  .profile-body .p-hero__overlay{
    position: static;   /* убираем absolute/inset, возвращаем в поток */
    inset: auto;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 12px;   /* небольшой отступ под баннером */
    padding: 0;
  }

  .profile-body .p-hero .p-hero__inner{
    margin: 0;
  }

    /* На мобильных баннер = единственная карточка, контейнер не «торчит» */
  .profile-body .p-hero{
    background: transparent !important;
    box-shadow: none !important;
    border: 0;
    border-radius: 0;          /* радиусы задаёт сам баннер */
    overflow: visible;         /* чтобы шапка (overlay) могла выходить вниз */
  }

  .profile-body .p-hero__banner{
    border-radius: 20px;       /* оставляем плавные углы именно у баннера */
  }
}

/* ===================== CARD SECTIONS ===================== */
.profile-block{
  margin:18px 0;
  padding:16px;
  border-radius:16px;

  /* стеклянная подложка: непрозрачность задаётся profile_card_opacity */
  background:
    linear-gradient(
      180deg,
      rgb(15 23 42 / var(--profile-card-opacity, .95)),
      rgb(15 23 42 / var(--profile-card-opacity, .95))
    ) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 55%, transparent),
      transparent 45%
    ) border-box;

  border:1px solid transparent;
  box-shadow:0 8px 30px rgba(2,6,23,.12);
}
.profile-block:hover{ box-shadow:0 12px 40px rgba(2,6,23,.16); }

/* Заголовки ВСЕГДА сверху */
.profile-block > .p-section-title{
  display:block;
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:.2px;
}
.p-section-title{
  display:flex; align-items:center; gap:10px;
}
.p-section-title::after{
  content:""; height:1px; flex:1 1 auto;
  background:linear-gradient(90deg,var(--profile-accent,var(--brand,#7aa2ff)),transparent);
  opacity:.35;
}

/* ===================== BIO ===================== */
.p-bio .profile-bio{
  position:relative; margin-top:6px; padding:14px 16px; border-radius:12px;
  background:linear-gradient(180deg, rgba(16,22,34,.45), rgba(13,19,32,.35));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(122,162,255,.08), 0 8px 28px rgba(2,6,23,.18);
}
.p-bio .profile-bio::before{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background:linear-gradient(135deg, rgba(122,162,255,.25), rgba(255,255,255,0) 40%) border-box;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; border:1px solid transparent;
}
.ql-view img{ max-width:100%; height:auto; border-radius:8px; }

/* ===================== LINKS ===================== */
.p-contacts__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap:12px;
  margin-top:4px;
}
.p-chip{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px; text-decoration:none;
  color:var(--text,#e6edff); border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(26,31,48,.95), rgba(10,12,20,.92));
  box-shadow:0 0 20px rgba(122,162,255,.15), inset 0 0 40px rgba(122,162,255,.05);
  transition:all .2s ease;
}
.p-chip:hover{
  border-color:var(--profile-accent,var(--brand,#7aa2ff));
  box-shadow:0 0 30px color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 25%, transparent),
             inset 0 0 60px color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 10%, transparent);
  transform:translateY(-2px);
}
.p-chip__ico{ font-size:1.1rem; opacity:.9; }

/* Цветовые варианты */
.p-chip--tg{
  background:linear-gradient(180deg, rgba(42,171,238,.92), rgba(15,25,50,.9));
  box-shadow:0 0 25px rgba(42,171,238,.28);
  border-color:rgba(42,171,238,.45);
}
.p-chip--tg:hover{ box-shadow:0 0 36px rgba(42,171,238,.40); }

.p-chip--boosty{
  background:linear-gradient(180deg, rgba(255,108,55,.92), rgba(40,10,0,.9));
  box-shadow:0 0 25px rgba(255,108,55,.28);
  border-color:rgba(255,108,55,.45);
}
.p-chip--boosty:hover{ box-shadow:0 0 36px rgba(255,108,55,.40); }

/* ===== Links groups ===== */
.p-links__groups{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:6px;
}

.p-links__group{
  padding:12px 12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(16,22,34,.35), rgba(13,19,32,.25));
}

.p-links__group-title{
  margin:0 0 10px;
  font-weight:800;
  font-size:.95rem;
  opacity:.95;
  display:flex;
  align-items:center;
  gap:10px;
}
.p-links__group-title::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background:linear-gradient(90deg, var(--profile-accent,var(--brand,#7aa2ff)), transparent);
  opacity:.25;
}

.p-links__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap:12px;
}

@media (max-width: 360px){
  .p-contacts__grid,
  .p-links__grid{
    grid-template-columns: 1fr;
  }
}

/* =======================================================================
   LIGHT / SPRING / APPLE — раскраска остальных чипов (чтобы не были бежевыми)
   ======================================================================= */

body.light-theme.profile-body .p-chip--vk,
body.spring-theme.profile-body .p-chip--vk,
body.apple-theme.profile-body .p-chip--vk{
  background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
  box-shadow: 0 6px 18px rgba(30,136,229,.28) !important;
}

body.light-theme.profile-body .p-chip--max,
body.spring-theme.profile-body .p-chip--max,
body.apple-theme.profile-body .p-chip--max{
  background: linear-gradient(135deg, #7c3aed, #4c1d95) !important;
  box-shadow: 0 6px 18px rgba(124,58,237,.26) !important;
}

body.light-theme.profile-body .p-chip--pinterest,
body.spring-theme.profile-body .p-chip--pinterest,
body.apple-theme.profile-body .p-chip--pinterest{
  background: linear-gradient(135deg, #b91c1c, #450a0a) !important;
  box-shadow: 0 6px 18px rgba(185,28,28,.22) !important;
}

body.light-theme.profile-body .p-chip--at,
body.spring-theme.profile-body .p-chip--at,
body.apple-theme.profile-body .p-chip--at{
  background: linear-gradient(135deg, #38bdf8, #075985) !important;
  box-shadow: 0 6px 18px rgba(56,189,248,.22) !important;
}

body.light-theme.profile-body .p-chip--fanfix,
body.spring-theme.profile-body .p-chip--fanfix,
body.apple-theme.profile-body .p-chip--fanfix{
  background: linear-gradient(135deg, #d8b48a, #a9714a) !important;
  box-shadow: 0 6px 18px rgba(216,180,138,.20) !important;
}

body.light-theme.profile-body .p-chip--ficbook,
body.spring-theme.profile-body .p-chip--ficbook,
body.apple-theme.profile-body .p-chip--ficbook{
  background: linear-gradient(135deg, #8b5c2e, #452710) !important;
  box-shadow: 0 6px 18px rgba(139,92,46,.22) !important;
}

/* лёгкий ховер для светлых тем */
body.light-theme.profile-body .p-chip:hover,
body.spring-theme.profile-body .p-chip:hover,
body.apple-theme.profile-body .p-chip:hover{
  transform: translateY(-1px);
  filter: saturate(1.05) contrast(1.02);
}


/* ===== Chip variants (fixed palette) ===== */

/* ВК — синий */
.p-chip--vk{
  background:linear-gradient(135deg,
    rgba(30,136,229,.92),
    rgba(13,71,161,.92)
  );
  box-shadow:0 0 22px rgba(30,136,229,.26);
  border-color:rgba(30,136,229,.48);
}
.p-chip--vk:hover{ box-shadow:0 0 34px rgba(30,136,229,.40); }

/* MAX — фиолетовый */
.p-chip--max{
  background:linear-gradient(135deg,
    rgba(124,58,237,.92),
    rgba(76,29,149,.92)
  );
  box-shadow:0 0 22px rgba(124,58,237,.24);
  border-color:rgba(124,58,237,.46);
}
.p-chip--max:hover{ box-shadow:0 0 34px rgba(124,58,237,.38); }

/* Pinterest — тёмно-красный (не режет глаз) */
.p-chip--pinterest{
  background:linear-gradient(135deg,
    rgba(153,27,27,.92),
    rgba(69,10,10,.92)
  );
  box-shadow:0 0 22px rgba(153,27,27,.20);
  border-color:rgba(153,27,27,.40);
}
.p-chip--pinterest:hover{ box-shadow:0 0 34px rgba(153,27,27,.32); }

/* Автор.Тудей — голубой */
.p-chip--at{
  background:linear-gradient(135deg,
    rgba(56,189,248,.92),
    rgba(7,89,133,.92)
  );
  box-shadow:0 0 22px rgba(56,189,248,.22);
  border-color:rgba(56,189,248,.44);
}
.p-chip--at:hover{ box-shadow:0 0 34px rgba(56,189,248,.36); }

/* Фанфикс — светло-коричневый */
.p-chip--fanfix{
  background:linear-gradient(135deg,
    rgba(216,180,138,.92),
    rgba(169,113,74,.92)
  );
  box-shadow:0 0 22px rgba(216,180,138,.18);
  border-color:rgba(216,180,138,.42);
}
.p-chip--fanfix:hover{ box-shadow:0 0 34px rgba(216,180,138,.30); }

/* Фикбук — коричневый */
.p-chip--ficbook{
  background:linear-gradient(135deg,
    rgba(139,92,46,.92),
    rgba(69,39,16,.92)
  );
  box-shadow:0 0 22px rgba(139,92,46,.20);
  border-color:rgba(139,92,46,.42);
}
.p-chip--ficbook:hover{ box-shadow:0 0 34px rgba(139,92,46,.32); }

/* ===================== RECO & FICS ===================== */
[data-reco-for-you] .card{
  border-radius:14px; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 20px rgba(2,6,23,.14);
}
[data-reco-for-you] .card .cover{ height:220px; object-fit:cover; border-radius:10px; }
[data-reco-for-you] .card .title{ min-height:2.6em; }

/* Фанфики */
.p-fics{ margin-top:40px; display:block; }
.p-fics > .p-section-title{
  margin:0 0 16px;
  text-align:left;
  font-size:1.4rem; font-weight:800;
}
.p-fics .list{ clear:both; display:grid; gap:14px; }

/* карточки фанфиков внутри профиля */
.profile-body .p-fics .card{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);

  /* тоже завязываем на profile_card_opacity, чтобы фон чуть просвечивал */
  background: rgb(15 23 42 / var(--profile-card-opacity, .95));
  box-shadow:0 10px 28px rgba(2,6,23,.18);
}

.p-fics .card .cover{
  height:220px;
  object-fit:cover;
  border-radius:10px;
}

@media (max-width:640px){
  .p-fics > .p-section-title{ font-size:1.2rem; }
}

/* ===================== THEMES ===================== */
body.light-theme .profile-block,
body.light-theme .p-hero__inner{
  background:linear-gradient(180deg,#fffaf5,#f8f1e8);
  border-color:rgba(145,118,83,.25);
  box-shadow:0 8px 25px rgba(145,118,83,.15);
}
body.light-theme .p-name{ color:#3b2a1a; }
body.light-theme .p-section-title::after{ background:linear-gradient(90deg,#c89c6c,transparent); }
body.light-theme .p-chip{ background:linear-gradient(180deg,#fff6e8,#f3e4d3); color:#4b392a; }

body.dark-theme .profile-block,
body.dark-theme .p-hero__inner{
  background:linear-gradient(180deg,#151821,#0e1018);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
body.dark-theme .p-name{ color:#f0f3ff; }
body.dark-theme .p-section-title::after{ background:linear-gradient(90deg,#7aa2ff,transparent); }
body.dark-theme .p-chip{ background:linear-gradient(180deg,#1b2232,#141a28); color:#cfd6e4; }

body.apple-theme .profile-block,
body.apple-theme .p-hero__inner{
  background:linear-gradient(180deg,#f3fff3,#dff8df);
  border-color:rgba(76,175,80,.35);
  box-shadow:0 8px 25px rgba(76,175,80,.15);
}
body.apple-theme .p-name{ color:#1a451a; }
body.apple-theme .p-section-title::after{ background:linear-gradient(90deg,#57c257,transparent); }
body.apple-theme .p-chip{ background:linear-gradient(180deg,#e8ffe8,#c8f5c8); color:#1f431f; }

body.spring-theme .profile-block,
body.spring-theme .p-hero__inner{
  background:linear-gradient(180deg,#fff4f8,#ffeaf3);
  border-color:rgba(255,142,181,.3);
  box-shadow:0 8px 25px rgba(255,142,181,.2);
}
body.spring-theme .p-name{ color:#a52354; }
body.spring-theme .p-section-title::after{ background:linear-gradient(90deg,#ff8db2,transparent); }
body.spring-theme .p-chip{ background:linear-gradient(180deg,#ffeaf3,#ffdce8); color:#772b4c; }

body.neon-theme .profile-block,
body.neon-theme .p-hero__inner{
  background:linear-gradient(180deg,#171628,#0e0d18);
  border-color:rgba(186,85,255,.4);
  box-shadow:0 0 25px rgba(186,85,255,.3), 0 0 50px rgba(46,255,248,.15);
}
body.neon-theme .p-name{ color:#8d6aff; text-shadow:0 0 8px rgba(138,70,255,.6); }
body.neon-theme .p-section-title::after{ background:linear-gradient(90deg,#8d6aff,#4df5ff); }

/* ===== HARD OVERRIDES (public/private profile) ===== */

/* 0) На всякий случай отключаем возможную старую сетку/плёнку на всём баннере */
.profile-body .p-hero::before,
.profile-body .p-hero::after{
  content: none !important;
}

/* 1) Баннер остаётся чистым: плёнка у overlay отключена полностью */
.profile-body .p-hero .p-hero__overlay{
  background: none !important;
}
.profile-body .p-hero .p-hero__overlay::before,
.profile-body .p-hero .p-hero__overlay::after{
  content: none !important;
}

/* 2) В профиле шапка полностью прозрачная, без сетки и стекла */
.profile-body .p-hero .p-hero__inner{
  position: relative;
  z-index: 3; /* остаётся над баннером на десктопе */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 14px;
}

/* сетку тоже вырубаем */
.profile-body .p-hero .p-hero__inner::after,
body.light-theme .p-hero .p-hero__inner::after{
  content: none !important;
}


/* 3) Заголовки «О себе» и «Ссылки» ВСЕГДА сверху своего блока */
.profile-body .profile-block > .p-section-title{
  display: block !important;
  float: none !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
  margin: 0 0 12px !important;
}

/* 4) Цвета чипов-ссылок прописываем явно (если что-то переопределяет) */
.profile-body .p-chip--tg{
  background: linear-gradient(180deg, rgba(42,171,238,.92), rgba(15,25,50,.9)) !important;
  border-color: rgba(42,171,238,.45) !important;
  box-shadow: 0 0 25px rgba(42,171,238,.28) !important;
}
.profile-body .p-chip--boosty{
  background: linear-gradient(180deg, rgba(255,108,55,.92), rgba(40,10,0,.9)) !important;
  border-color: rgba(255,108,55,.45) !important;
  box-shadow: 0 0 25px rgba(255,108,55,.28) !important;
}

/* 5) На мобильных — тот же порядок заголовков */
@media (max-width: 640px){
  .profile-body .profile-block > .p-section-title{ margin-bottom: 12px !important; }
}

/* ---------- О себе (единая рамка в приватном и публичном) ---------- */
.p-bio .ql-view{
  position: relative;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 12px;

  /* стеклянная подложка */
  background: linear-gradient(180deg, rgba(16,22,34,.45), rgba(13,19,32,.35));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 0 1px rgba(122,162,255,.08),
    0 8px 28px rgba(2,6,23,.18);
}

/* лёгкий «глянец» по краям */
.p-bio .ql-view::before{
  content:"";
  position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(122,162,255,.25), rgba(255,255,255,0) 40%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; /* эффект border-image */
  border:1px solid transparent;
}

/* светлая тема — тёплее */
body.light-theme .p-bio .ql-view{
  background: linear-gradient(180deg, #fff7ef, #f6eee4);
  border-color: rgba(145,118,83,.25);
  box-shadow:
    inset 0 0 0 1px rgba(200,156,108,.15),
    0 8px 22px rgba(145,118,83,.18);
}

/* медиа / контент внутри BIO */
.p-bio .ql-view img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ===== Patron badge (Меценат) ======================================= */
.p-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.patron-badge{
  --gold1: #fff4c7;
  --gold2: #f7d774;
  --gold3: #f0b84b;
  --ink:   #3f2a00;

  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700; font-size:.9rem;
  line-height:1;

  background: linear-gradient(135deg, var(--gold1), var(--gold2) 60%, var(--gold3));
  color: var(--ink);
  border: 1px solid rgba(120, 85, 0, .35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 6px 18px rgba(240,180,60,.22),
    0 1px 2px rgba(0,0,0,.12);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.patron-badge .ico{
  display:inline-block;
  transform: translateY(-1px);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.4));
}

/* Темные темы — чуть приглушим «чернила», чтобы не рябило */
:root[data-theme="dark"] .patron-badge,
:root[data-theme="neon"] .patron-badge{
  --ink:#241800;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 6px 18px rgba(240,180,60,.25),
    0 1px 2px rgba(0,0,0,.35);
}

/* Apple/Spring — тепло-золотой сохраняем, но делаем бордер спокойнее */
:root[data-theme="apple"] .patron-badge,
:root[data-theme="spring"] .patron-badge{
  border-color: rgba(120, 85, 0, .28);
}

/* компакт на узких экранах */
@media (max-width:560px){
  .patron-badge{ font-size:.85rem; padding:3px 9px; }
}

/* Плашки достижений внутри секции */
.p-achievements .achv-grid{ margin-top: 8px; }

/* Мобайл: прокрутка списка достижений внутри блока */
@media (max-width: 640px){
  .profile-body .p-achievements .achv-grid{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
  }

  .profile-body .p-achievements .achv-grid::-webkit-scrollbar{ width: 8px; }
  .profile-body .p-achievements .achv-grid::-webkit-scrollbar-thumb{
    border-radius: 8px;
    background: color-mix(in srgb, var(--profile-accent, var(--brand, #7aa2ff)) 40%, #000 60%);
  }
  .profile-body .p-achievements .achv-grid::-webkit-scrollbar-track{ background: transparent; }
}

/* ===== Меценат: жёсткие оверрайды под кастомную гамму ===== */

body.profile-body[data-patron="1"] .profile-block{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand, #7aa2ff) 10%, #000),
      color-mix(in srgb, var(--brand, #7aa2ff) 30%, #000)
    ) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand, #7aa2ff) 70%, transparent),
      transparent 45%
    ) border-box;
  border-color: color-mix(in srgb, var(--brand, #7aa2ff) 40%, #fff);
}

body.profile-body[data-patron="1"] .p-section-title::after{
  background: linear-gradient(90deg, var(--brand, #7aa2ff), transparent);
}

/* =======================================================================
   КАСТОМНАЯ ЦВЕТОВАЯ ТЕМА ПРОФИЛЯ (МЕЦЕНАТ)
   ======================================================================= */

body.profile-body.profile-has-theme .profile-block{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--profile-accent,#7aa2ff) 16%, #101622),
      color-mix(in srgb, var(--profile-accent,#7aa2ff) 40%, #0d1320)
    ) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--profile-accent,#7aa2ff) 75%, transparent),
      transparent 45%
    ) border-box;
  border: 1px solid color-mix(in srgb, var(--profile-accent,#7aa2ff) 45%, #ffffff10);
  box-shadow:
    0 8px 26px color-mix(in srgb, var(--profile-accent,#7aa2ff) 24%, #000),
    0 0 0 1px rgba(0,0,0,.35);
}

body.profile-body.profile-has-theme .p-section-title::after{
  background: linear-gradient(
    90deg,
    var(--profile-accent, #7aa2ff),
    transparent
  );
  opacity: .45;
}

body.profile-body.profile-has-theme .p-hero__actions .button.p-edit-btn{
  background: linear-gradient(
    180deg,
    var(--profile-accent, #7aa2ff),
    color-mix(in srgb, var(--profile-accent, #7aa2ff) 70%, #000 30%)
  );
  border-color: color-mix(in srgb, var(--profile-accent, #7aa2ff) 60%, #000 40%);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--profile-accent, #7aa2ff) 35%, transparent);
}

body.profile-body.profile-has-theme .p-chip:hover{
  border-color: var(--profile-accent, #7aa2ff);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--profile-accent, #7aa2ff) 25%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--profile-accent, #7aa2ff) 10%, transparent);
}

body.profile-body.profile-has-theme .p-achievements .achv-grid::-webkit-scrollbar-thumb{
  background: color-mix(
    in srgb,
    var(--profile-accent, #7aa2ff) 40%,
    #000 60%
  );
}

/* =======================================================================
   LIGHT / SPRING / APPLE — защита профиля от «кровавых» заливок
   ======================================================================= */

body.profile-body.light-theme,
body.profile-body.spring-theme,
body.profile-body.apple-theme,
body.light-theme.profile-body,
body.spring-theme.profile-body,
body.apple-theme.profile-body {
  background: var(--background, var(--surface-0, #f8fafc));
}

body.light-theme.profile-body .p-hero,
body.spring-theme.profile-body .p-hero,
body.apple-theme.profile-body .p-hero {
  background: var(--surface-1, var(--surface, #ffffff)) !important;
  border-color: var(--border, #e5e7eb) !important;
  box-shadow: var(--card-shadow, var(--shadow-1, 0 2px 10px rgba(0,0,0,.05)));
}

body.light-theme.profile-body .profile-block.card,
body.spring-theme.profile-body .profile-block.card,
body.apple-theme.profile-body .profile-block.card {
  background: var(--surface-1, var(--surface, #ffffff)) !important;
  border-color: var(--border, #e5e7eb) !important;
}

body.light-theme.profile-body .p-fics .card,
body.spring-theme.profile-body .p-fics .card,
body.apple-theme.profile-body .p-fics .card {
  background: var(--surface-1, var(--surface, #ffffff)) !important;
  border-color: var(--border, #e5e7eb) !important;
}

body.light-theme.profile-body.profile-has-theme .profile-block.card,
body.spring-theme.profile-body.profile-has-theme .profile-block.card,
body.apple-theme.profile-body.profile-has-theme .profile-block.card {
  background: var(--surface-1, var(--surface, #ffffff)) !important;
}

/* =======================================================================
   LIGHT / SPRING / APPLE — контакты (Telegram / Boosty)
   ======================================================================= */

body.light-theme.profile-body .p-chip,
body.spring-theme.profile-body .p-chip,
body.apple-theme.profile-body .p-chip {
  color: #ffffff !important;
  text-shadow: 0 0 4px rgba(0,0,0,.25);
  border: none;
}

body.light-theme.profile-body .p-chip--tg,
body.spring-theme.profile-body .p-chip--tg,
body.apple-theme.profile-body .p-chip--tg {
  background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
  box-shadow: 0 6px 18px rgba(30,136,229,.35);
}

body.light-theme.profile-body .p-chip--boosty,
body.spring-theme.profile-body .p-chip--boosty,
body.apple-theme.profile-body .p-chip--boosty {
  background: linear-gradient(135deg, #ff8a2a, #ff5e3a) !important;
  box-shadow: 0 6px 18px rgba(255,120,60,.35);
}

body.light-theme.profile-body .p-chip .p-chip__ico,
body.spring-theme.profile-body .p-chip .p-chip__ico,
body.apple-theme.profile-body .p-chip .p-chip__ico {
  opacity: .98;
}

/* =======================================================================
   PROFILE — усиленное свечение секций (hero + блоки)
   ======================================================================= */

.profile-body {
  --profile-glow-border: color-mix(in srgb,
    var(--border, rgba(148,163,184,.35)) 70%,
    transparent
  );
  --profile-glow-outer: color-mix(in srgb,
    var(--accent, var(--profile-accent, #f97316)) 40%,
    transparent
  );
}

body.light-theme.profile-body,
body.spring-theme.profile-body,
body.apple-theme.profile-body {
  --profile-glow-border: color-mix(in srgb,
    var(--border, rgba(200,180,150,.7)) 80%,
    rgba(0,0,0,.02) 20%
  );
  --profile-glow-outer: color-mix(in srgb,
    var(--accent, var(--profile-accent, #e67a5b)) 55%,
    transparent
  );
}

.profile-body .p-hero,
.profile-body .profile-block.card {
  box-shadow:
    0 0 0 1px var(--profile-glow-border),
    0 0 32px var(--profile-glow-outer);
}

.profile-body .p-fics.profile-block.card {
  box-shadow:
    0 0 0 1px var(--profile-glow-border),
    0 0 24px color-mix(in srgb, var(--profile-glow-outer) 70%, transparent);
}

/* MOBILE: баннер без выступающего "подвала" */
@media (max-width: 720px) {
  /* .p-hero сам коробку не рисует — только дети */
  body.profile-body .p-profile .p-hero{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    overflow: visible !important;
  }

  /* баннер сам становится единственной карточкой */
  body.profile-body .p-hero__banner{
    height: auto;                          /* убираем фикс 240px */
    background: transparent !important;
    border-radius: 20px;
    overflow: hidden;
  }

  body.profile-body .p-hero__banner-img{
    display: block;
    width: 100%;
    height: auto;                          /* баннер по своей высоте */
    object-fit: cover;
  }

  /* шапка с авой просто блоком под баннером */
  body.profile-body .p-hero__overlay{
    position: static;
    margin-top: 12px;
  }

  /* <<< ВОТ ЭТО МЕНЯЕМ >>> */
  body.profile-body .p-hero .p-hero__inner{
    margin: 0;
    width: auto;              /* вместо width:100% */
    padding: 12px 16px;       /* помягче и без выезда за края */
    box-sizing: border-box;   /* всё внутри 100% ширины родителя */
  }

/* 2. На мобиле — бейдж мецената уходит под роль отдельной строкой */
  .profile-body .p-head__meta{
    display: flex;
    flex-direction: column;   /* вниз */
    align-items: flex-start;  /* выравниваем по левому краю */
    gap: 4px;
  }

  .profile-body .p-head__meta .patron-badge{
    margin-left: 0;           /* убираем смещение вправо */
  }
}

@media (max-width:720px){
  .profile-body{
    overflow-x: hidden;
  }
}

/* =======================================================================
   MOBILE FIX — убираем горизонтальный скролл профиля
   ======================================================================= */
@media (max-width: 720px) {
  /* Жёстко режем любые выезды вправо */
  body.profile-body {
    overflow-x: hidden;
  }

  /* Внешнее свечение делаем внутренним, чтобы оно не расширяло страницу */
  .profile-body .p-hero,
  .profile-body .profile-block.card,
  .profile-body .p-fics.profile-block.card {
    box-shadow:
      0 0 0 1px var(--profile-glow-border),
      0 0 16px var(--profile-glow-outer) inset;
  }
}

/* ===== Форма аватарки (меценаты) ===== */
body.profile-body[data-avatar-shape="circle"]{
  --avatar-radius:50%;
  --avatar-clip:none;
}
body.profile-body[data-avatar-shape="square"]{
  --avatar-radius:0px;
  --avatar-clip:none;
}
body.profile-body[data-avatar-shape="rounded"]{
  --avatar-radius:14px;
  --avatar-clip:none;
}
body.profile-body[data-avatar-shape="squircle"]{
  --avatar-radius:32%;
  --avatar-clip:none;
}
body.profile-body[data-avatar-shape="triangle"]{
  --avatar-radius:0px;
  --avatar-clip:polygon(50% 0%, 0% 100%, 100% 100%);
}
body.profile-body[data-avatar-shape="diamond"]{
  --avatar-radius:0px;
  --avatar-clip:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
body.profile-body[data-avatar-shape="hexagon"]{
  --avatar-radius:0px;
  --avatar-clip:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
}
body.profile-body[data-avatar-shape="octagon"]{
  --avatar-radius:0px;
  --avatar-clip:polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* ===== SAFETY NET: никакого горизонтального выезда ===== */
.profile-body .p-profile,
.profile-body .p-profile *{
  box-sizing:border-box;
}

/* flex-детям разрешаем ужиматься */
.profile-body .p-hero__inner,
.profile-body .p-hero__left,
.profile-body .p-head,
.profile-body .p-hero__actions{
  min-width:0;
}

/* длинные строки (ник/ссылки/описания) не раздвигают страницу */
.profile-body .p-name,
.profile-body .drawer-username,
.profile-body .profile-bio,
.profile-body .p-chip,
.profile-body .p-chip * ,
.profile-body .p-bio .ql-view{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* на всякий случай: pre/code из Quill */
.profile-body .profile-bio pre,
.profile-body .profile-bio code,
.profile-body .p-bio .ql-view pre,
.profile-body .p-bio .ql-view code{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

@media (max-width: 360px){
  .p-profile{ padding: 12px; }

  .p-avatar, .p-avatar__img{
    width:72px;
    height:72px;
  }

  .p-name{ font-size:1.35rem; }

  .profile-body .p-hero .p-hero__inner{
    padding: 10px 12px;
  }

  .p-hero__actions .button{
    width:100%;
    justify-content:center;
  }
}

/* ===================== GIFT SPARKS (profile) ===================== */
.p-gift .p-gift__box{
  display:flex;
  gap:16px;
  align-items:stretch;
  justify-content:space-between;
  padding:14px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 18%, transparent);
  background:
    radial-gradient(900px 220px at 20% 0%,
      color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 14%, transparent),
      transparent 60%),
    linear-gradient(180deg,
      rgb(15 23 42 / var(--profile-card-opacity, .95)),
      rgb(15 23 42 / var(--profile-card-opacity, .95))
    );
  box-shadow: 0 10px 28px rgba(2,6,23,.18);
}

.p-gift__to{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}
.p-gift__to-ico{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 30%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.p-gift__hint{ margin-top:8px; max-width:520px; }

.p-gift__form{
  display:grid;
  grid-template-columns: 140px minmax(220px, 1fr);
  gap:10px;
  align-content:start;
  min-width:0;
}
.p-gift__field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.p-gift__field--wide{ grid-column: 1 / -1; }

.p-gift__label{ font-weight:800; font-size:.9rem; opacity:.9; }

.p-gift__input{
  width:100%;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,.14)) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2,#141a27) 65%, transparent);
  color: var(--text,#eaf0ff);
  outline: none;
}
body.light-theme .p-gift__input{
  background: rgba(255,255,255,.85);
  color:#2a1b12;
  border-color: rgba(145,118,83,.25);
}

.p-gift__actions{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:4px;
}
.p-gift__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:12px;
  padding:10px 14px;
  background: linear-gradient(
    180deg,
    var(--profile-accent, var(--brand,#7aa2ff)),
    color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 70%, #000 30%)
  );
  border:1px solid color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 60%, #000 40%);
  box-shadow:0 10px 22px color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 35%, transparent);
}
.p-gift__btn:hover{ transform: translateY(-1px); }
.p-gift__btn-ico{ filter: drop-shadow(0 1px 0 rgba(255,255,255,.25)); }

@media (max-width: 720px){
  .p-gift .p-gift__box{ flex-direction:column; }
  .p-gift__form{ grid-template-columns: 1fr; }
  .p-gift__actions{ flex-direction:column; align-items:stretch; }
  .p-gift__btn{ width:100%; justify-content:center; }
}

/* =======================================================================
   PROFILE BLOCKS — НЕ ДАЁМ .card ломать секции (у .card часто display:flex)
   ======================================================================= */
.profile-body .profile-block.card{
  display:block !important;
  min-width:0;
}

/* На всякий случай: заголовки не дробим по буквам */
.profile-body .profile-block > .p-section-title{
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto;
}

/* =======================================================================
   GIFT SPARKS — блок "Подарить искорки"
   ======================================================================= */
.profile-body .p-gift .p-gift__box{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap:14px;
  align-items:start;

  padding:14px;
  border-radius:14px;

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-1,#141a27) 92%, transparent),
      color-mix(in srgb, var(--surface-0,#0b1220) 92%, transparent)
    );
  border:1px solid color-mix(in srgb, var(--border-color,#23314a) 70%, transparent);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.profile-body .p-gift__left{ min-width:0; }

.profile-body .p-gift__to{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight:800;
  color:var(--text,#eaf0ff);
}
.profile-body .p-gift__to-ico{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 40%, transparent);
}

.profile-body .p-gift__hint{
  margin-top:8px;
  line-height:1.35;
  color:var(--muted,#93a3b8);
}

/* форма */
.profile-body .p-gift__form{
  display:grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap:12px;
  min-width:0;
}

.profile-body .p-gift__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.profile-body .p-gift__field--wide{ grid-column:1 / -1; }

.profile-body .p-gift__label{
  font-size:.85rem;
  font-weight:800;
  color:var(--muted,#93a3b8);
}

.profile-body .p-gift__input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;

  padding:10px 12px;
  border-radius:12px;

  background: color-mix(in srgb, var(--surface-0,#0b1220) 70%, transparent);
  color:var(--text,#eaf0ff);

  border:1px solid color-mix(in srgb, var(--border-color,#23314a) 70%, transparent);
  outline:none;
}

.profile-body .p-gift__input::placeholder{
  color: color-mix(in srgb, var(--muted,#93a3b8) 85%, transparent);
}

.profile-body .p-gift__input:focus{
  border-color: color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--profile-accent,var(--brand,#7aa2ff)) 22%, transparent);
}

.profile-body .p-gift__actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-top:2px;
}

.profile-body .p-gift__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:12px;
  padding:10px 16px;
}

.profile-body .p-gift__msg{ min-height:18px; }

/* ===================== LIGHT THEME FIX ===================== */
body.light-theme.profile-body .p-gift .p-gift__box{
  background: linear-gradient(180deg,#fffaf5,#f6eee4);
  border-color: rgba(145,118,83,.25);
  box-shadow:0 10px 24px rgba(145,118,83,.14);
}

body.light-theme.profile-body .p-gift__to{ color:#3b2a1a; }
body.light-theme.profile-body .p-gift__hint{ color: rgba(75,57,42,.75); }
body.light-theme.profile-body .p-gift__label{ color: rgba(75,57,42,.78); }

body.light-theme.profile-body .p-gift__input{
  background:#fff;
  color:#3b2a1a;
  border-color: rgba(145,118,83,.28);
}
body.light-theme.profile-body .p-gift__input::placeholder{
  color: rgba(75,57,42,.55);
}
body.light-theme.profile-body .p-gift__input:focus{
  border-color:#c89c6c;
  box-shadow:0 0 0 3px rgba(200,156,108,.22);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .profile-body .p-gift .p-gift__box{
    grid-template-columns: 1fr;
  }
  .profile-body .p-gift__form{
    grid-template-columns: 1fr;
  }
  .profile-body .p-gift__field--wide{
    grid-column:auto;
  }
}

/* =======================================================================
   EMPTY PROFILE — не ужимаем раскладку, когда контента нет
   ======================================================================= */

/* На широких экранах убираем "две колонки" и не держим сайдбар узким */
@media (min-width: 880px){
  .profile-body.profile-empty .p-profile-grid{
    grid-template-columns: 1fr !important; /* если это grid */
  }

  .profile-body.profile-empty .p-profile-col--side{
    width: 100% !important;
    max-width: none !important;
    grid-column: 1 / -1 !important; /* если grid */
  }
}

/* Если вдруг p-profile-grid = flex, тоже переведём в колонку */
.profile-body.profile-empty .p-profile-grid{
  flex-direction: column !important;
}

/* чуть воздуха, чтобы блоки не выглядели "обрубками" */
.profile-body.profile-empty .profile-block{
  margin-top: 18px;
}

/* =======================================================================
   PROFILE GRID — базовая сетка (перебиваем возможные глобальные стили)
   ======================================================================= */
.profile-body .p-profile-grid{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap:16px;
  align-items:start;
}

.profile-body .p-profile-col{
  min-width:0;
}
.profile-body .p-profile-col--main,
.profile-body .p-profile-col--side{
  min-width:0;
}

/* На планшетах/узких — одна колонка */
@media (max-width: 920px){
  .profile-body .p-profile-grid{
    grid-template-columns: 1fr !important;
  }
}

/* =======================================================================
   FULL WIDTH SAFETY — блоки профиля не должны "усыхать"
   ======================================================================= */
.profile-body .p-profile{
  width:100%;
}

.profile-body .p-hero{
  width:100%;
  max-width:none !important;
}

/* именно секции профиля */
.profile-body .profile-block.card,
.profile-body .profile-block{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}

/* =======================================================================
   EMPTY PROFILE MODE — одна колонка ВСЕГДА (класс или data-атрибут)
   ======================================================================= */
.profile-body.profile-empty .p-profile-grid,
.profile-body[data-profile-empty="1"] .p-profile-grid{
  grid-template-columns: 1fr !important;
}

.profile-body.profile-empty .p-profile-col--side,
.profile-body[data-profile-empty="1"] .p-profile-col--side{
  grid-column: 1 / -1 !important;
}

/* =======================================================================
   HERO FIX (когда мало контента) — не даём кнопкам налезать
   ======================================================================= */
.profile-body.profile-empty .p-hero__inner,
.profile-body[data-profile-empty="1"] .p-hero__inner{
  flex-wrap:wrap;              /* разрешаем перенос */
  align-items:flex-start;      /* чтобы не тянуло вниз */
}

.profile-body.profile-empty .p-hero__actions,
.profile-body[data-profile-empty="1"] .p-hero__actions{
  width:100%;
  justify-content:flex-start;
  gap:10px;
}

/* кнопки в пустом профиле — аккуратнее */
.profile-body.profile-empty .p-hero__actions .button,
.profile-body[data-profile-empty="1"] .p-hero__actions .button{
  max-width:100%;
}

/* ========================================================================
   PUBLIC COLLECTIONS (profile)
   ======================================================================== */

.p-collections__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.p-collections__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--space-3,12px);
  margin-top:10px;
}

/* ===== Cards become “grid-areas” so you DON’T need extra wrappers in EJS ===== */

.p-collection-card{
  appearance:none;
  -webkit-appearance:none;

  width:100%;
  text-align:left;
  cursor:pointer;

  border:1px solid color-mix(in srgb, var(--border-color,#23314a) 70%, transparent);
  border-radius:18px;
  padding:14px;

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-1,#121a2a) 92%, transparent),
      color-mix(in srgb, var(--surface-0,#0b1220) 92%, transparent)
    );

  box-shadow:0 12px 34px rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;

  /* layout */
  display:grid;
  grid-template-columns:84px minmax(0, 1fr);
  grid-template-areas:
    "cover title"
    "cover desc"
    "cover meta";
  gap:12px;
  align-items:start;
}

.p-collection-card:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 44px rgba(0,0,0,.26);
  border-color:color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 55%, var(--border-color,#23314a));
}

.p-collection-card:focus-visible{
  outline:2px solid color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 70%, transparent);
  outline-offset:3px;
}

/* cover (from EJS) */
.p-collection-card__cover{
  grid-area:cover;
  width:84px;
  height:84px;
  border-radius:14px;
  overflow:hidden;

  background:color-mix(in srgb, var(--surface-1,#121a2a) 78%, transparent);
  border:1px solid color-mix(in srgb, var(--border-color,#23314a) 60%, transparent);
}

.p-collection-card__cover-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.p-collection-card__cover-ph{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 22%, transparent),
    color-mix(in srgb, var(--surface-1,#121a2a) 90%, transparent)
  );
}

/* map text blocks to areas */
.p-collection-card__title{
  grid-area:title;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--text,#eaf0ff);
  margin:0;
}

.p-collection-card__desc{
  grid-area:desc;
  font-size:13px;
  line-height:1.35;
  max-height:2.8em;
  overflow:hidden;
}

.p-collection-card__meta{
  grid-area:meta;
  margin-top:0;
  font-size:12px;
  opacity:.85;
}

/* mobile: stack */
@media (max-width: 520px){
  .p-collection-card{
    grid-template-columns:1fr;
    grid-template-areas:
      "cover"
      "title"
      "desc"
      "meta";
  }
  .p-collection-card__cover{
    width:100%;
    height:auto;
    aspect-ratio: 16 / 10;
  }
}

/* ===== Modal ===== */

body.modal-open{
  overflow:hidden;
}

.p-collection-modal[hidden]{ display:none; }

.p-collection-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4,16px);
}

.p-collection-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.p-collection-modal__dialog{
  position:relative;
  width:min(980px, 100%);
  max-height:min(82vh, 820px);
  overflow:hidden;

  border-radius:22px;
  border:1px solid color-mix(in srgb, var(--border-color,#23314a) 70%, transparent);
  background:color-mix(in srgb, var(--panel,#0f1627) 92%, transparent);
  box-shadow:0 24px 80px rgba(0,0,0,.48);

  display:flex;
  flex-direction:column;
}

.p-collection-modal__head{
  padding:14px 16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid color-mix(in srgb, var(--border-color,#23314a) 55%, transparent);
}

.p-collection-modal__title{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.p-collection-modal__desc{
  margin-top:6px;
  font-size:13px;
  line-height:1.35;
  max-width:72ch;
}

.p-collection-modal__close{
  border:0;
  background:transparent;
  color:var(--text,#eaf0ff);
  font-size:22px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:12px;
}

.p-collection-modal__close:hover{
  background:color-mix(in srgb, var(--text,#eaf0ff) 8%, transparent);
}

.p-collection-modal__body{
  padding:14px 16px 18px;
  overflow:auto;
}

.p-collection-items{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
}

.p-collection-item{
  display:flex;
  gap:10px;
  align-items:center;

  padding:10px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--border-color,#23314a) 55%, transparent);
  background:color-mix(in srgb, var(--surface-1,#121a2a) 80%, transparent);

  color:inherit;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.p-collection-item:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--profile-accent, var(--brand,#7aa2ff)) 55%, var(--border-color,#23314a));
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.p-collection-item__cover{
  width:44px;
  height:60px;
  border-radius:10px;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid color-mix(in srgb, var(--border-color,#23314a) 55%, transparent);
  background:color-mix(in srgb, var(--surface-0,#0b1220) 70%, transparent);
}

.p-collection-item__title{
  font-weight:900;
  font-size:13px;
  line-height:1.25;
}

.p-collection-item__meta{
  font-size:12px;
  opacity:.82;
  margin-top:2px;
}

@media (max-width:560px){
  .p-collection-items{ grid-template-columns:1fr; }
  .p-collection-modal{ padding:10px; }
}