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

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

/* ===================== 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 12px 12px;
  border-radius:14px;
  background: rgba(12,16,28,.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; border-radius:50%; overflow:hidden;
  background:var(--surface,#0f1420);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.p-avatar__img{
  width:100%; height:100%; object-fit:cover; object-position:center; aspect-ratio:1 / 1;
  border-radius:50%; display:block; flex-shrink: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(--brand,#7aa2ff), color-mix(in srgb,var(--brand,#7aa2ff) 70%, #000 30%));
  color:#fff; border:1px solid color-mix(in srgb,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; }
  .p-avatar, .p-avatar__img{ width:84px; height:84px; }
  .p-hero__inner{ --hero-grid-size:32px; }
}

/* ===================== CARD SECTIONS ===================== */
.profile-block{
  margin:18px 0; padding:16px; border-radius:16px;
  background:
    linear-gradient(180deg,var(--surface-1,#101622),var(--surface-2,#0d1320)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,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(--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(220px,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(--brand,#7aa2ff);
  box-shadow:0 0 30px rgba(122,162,255,.25), inset 0 0 60px rgba(122,162,255,.1);
  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); }

/* ===================== 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; }
.p-fics .card{ border-radius:14px; border:1px solid rgba(255,255,255,.06); }
.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) Полупрозрачная «стеклянная» плашка и СЕТКА — ТОЛЬКО внутри .p-hero__inner */
.profile-body .p-hero .p-hero__inner{
  position: relative;
  z-index: 3; /* над баннером */
  background: rgba(12,16,28,.45) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 6px 22px rgba(30,58,138,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
}
.profile-body .p-hero .p-hero__inner::after{
  content: "" !important;
  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 36px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 36px);
  mix-blend-mode: overlay;
  opacity: .55;
}
body.light-theme .p-hero .p-hero__inner::after{
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.12) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 36px);
  mix-blend-mode: multiply;
  opacity: .5;
}

/* 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; }
}

/* === REMOVE ONLY THE GLASS PANEL (keep banner, avatar, name, role, buttons) === */
.profile-body .p-hero__inner{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* вырубаем её псевдо-элементы (в т.ч. сетку внутри плашки) */
.profile-body .p-hero__inner::before,
.profile-body .p-hero__inner::after{
  content: none !important;
  background: none !important;
  box-shadow: none !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;
}