/* ============================================================
   PROFIL — User Profile oldal (profil.html / js/ui/userProfilePageUI.js)
   Profil-fejléc, tab-váltó, Infó tab stat-kártyák. A Backpack tab a
   közös css/backpack.css bp-* osztályait használja.
   ============================================================ */

#profil-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

/* ── Fejléc ─────────────────────────────────────────────────── */

.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 30px;
    background: linear-gradient(135deg, var(--c-panel-light) 0%, var(--c-panel) 100%);
    border: 1px solid var(--border-glow-cyan);
    border-radius: var(--radius-l);
    box-shadow: 0 0 40px rgba(76, 212, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.45);
    margin-bottom: 24px;
}

/* ── User Skin: Csillag (VÁSÁRCSARNOK BŐVÍTÉS spec §37) ──────
   Csak a fejléc háttér/szegély/glow-ját témázza rózsaszín-fehér paletta +
   animált rainbow-shimmer szegéllyel — az avatar/név/XP/stat-kártyák
   elrendezését és olvashatóságát nem érinti. */
.profile-header.profile-theme-star-guardian {
    background-image:
        linear-gradient(120deg, rgba(20, 6, 20, 0.58), rgba(10, 4, 14, 0.78)),
        url("../image/wish/csomagok/csillagorzo_user_skin.webp");
    background-size: cover;
    background-position: center;
    border-color: rgba(255, 170, 220, 0.55);
    box-shadow: 0 0 40px rgba(255, 150, 220, 0.18), 0 20px 50px rgba(0, 0, 0, 0.45);
    animation: profileStarGuardianShimmer 4s linear infinite;
}
.profile-header.profile-theme-star-guardian .ph-avatar-ring {
    background: conic-gradient(from 180deg, #ffb0e0, #ffffff, #ffb0e0);
    box-shadow: 0 0 22px rgba(255, 150, 220, 0.45);
}
@keyframes profileStarGuardianShimmer {
    0%   { box-shadow: 0 0 40px rgba(255, 130, 200, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
    33%  { box-shadow: 0 0 40px rgba(255, 220, 140, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
    66%  { box-shadow: 0 0 40px rgba(160, 190, 255, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
    100% { box-shadow: 0 0 40px rgba(255, 130, 200, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
}

/* ── User Skin: Cyber — Lila (lila neon keret + belső lila pásztázó fénycsík) ── */
.profile-header.profile-theme-cyber-1 {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(120deg, rgba(20, 4, 32, 0.65), rgba(9, 2, 16, 0.85)),
        url("../image/wish/csomagok/cyber_user_skin_1.webp");
    background-size: cover;
    background-position: center;
    border-color: rgba(168, 60, 255, 0.75);
    animation: profileCyberRedFrame 1.8s ease-in-out infinite;
}
.profile-header.profile-theme-cyber-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 0%, transparent 42%,
        rgba(168, 60, 255, 0.4) 50%,
        transparent 58%, transparent 100%);
    background-size: 260% 100%;
    mix-blend-mode: screen;
    animation: profileCyberRedScan 3s linear infinite;
    pointer-events: none;
}
.profile-header.profile-theme-cyber-1 .ph-avatar-ring {
    background: conic-gradient(from 180deg, #a83cff, #ffffff, #a83cff);
    box-shadow: 0 0 22px rgba(168, 60, 255, 0.5);
}
@keyframes profileCyberRedFrame {
    0%, 100% { box-shadow: 0 0 30px rgba(168, 60, 255, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
    50%      { box-shadow: 0 0 46px rgba(190, 90, 255, 0.4), 0 20px 50px rgba(0, 0, 0, 0.45); }
}
@keyframes profileCyberRedScan {
    0%   { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}

/* ── User Skin: Cyber — Neon Kék (neon kék keret + hex alakú belső csillogások) ── */
.profile-header.profile-theme-cyber-2 {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(120deg, rgba(2, 12, 22, 0.6), rgba(1, 6, 12, 0.82)),
        url("../image/wish/csomagok/cyber_user_skin_2.webp");
    background-size: cover;
    background-position: center;
    border-color: rgba(20, 170, 255, 0.7);
    animation: profileCyberOrangeFrame 1.8s ease-in-out infinite;
}
.profile-header.profile-theme-cyber-2::before,
.profile-header.profile-theme-cyber-2::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
    background: radial-gradient(circle, rgba(150, 220, 255, 0.95), rgba(20, 150, 255, 0.15) 70%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(20, 170, 255, 0.8));
    opacity: 0;
    pointer-events: none;
}
.profile-header.profile-theme-cyber-2::before {
    left: 18%;
    top: 20px;
    animation: profileCyberHexTwinkle 2.8s ease-in-out infinite;
}
.profile-header.profile-theme-cyber-2::after {
    right: 12%;
    bottom: 24px;
    width: 16px;
    height: 16px;
    animation: profileCyberHexTwinkle 2.8s ease-in-out 1.2s infinite;
}
.profile-header.profile-theme-cyber-2 .ph-avatar-ring {
    background: conic-gradient(from 180deg, #14aaff, #ffffff, #14aaff);
    box-shadow: 0 0 22px rgba(20, 170, 255, 0.5);
}
@keyframes profileCyberOrangeFrame {
    0%, 100% { box-shadow: 0 0 30px rgba(20, 170, 255, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
    50%      { box-shadow: 0 0 46px rgba(80, 200, 255, 0.4), 0 20px 50px rgba(0, 0, 0, 0.45); }
}
@keyframes profileCyberHexTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1); }
}

/* ── User Skin: Akadémia (piros-kék dupla animált keret + csillag motívumok + pulzáló belső fény) ── */
.profile-header.profile-theme-academia {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(120deg, rgba(20, 4, 4, 0.55), rgba(4, 8, 28, 0.82)),
        url("../image/wish/csomagok/akademia_user_skin.webp");
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(220, 30, 30, 0.85);
    animation: profileAcademiaOuterFrame 2.6s ease-in-out infinite;
}
/* Belső, a külsőtől eltérő ütemű kék keret-gyűrű — a piros külső kerettel
   együtt adja a "piros-kék dupla animált keret" hatást. */
.profile-header.profile-theme-academia::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--radius-l) - 6px);
    border: 1.5px solid rgba(40, 90, 220, 0.85);
    animation: profileAcademiaInnerFrame 2.6s ease-in-out 1.3s infinite;
    pointer-events: none;
}
.profile-header.profile-theme-academia::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 25%, rgba(220, 30, 30, 0.28), transparent 60%),
        radial-gradient(ellipse at 80% 75%, rgba(40, 110, 230, 0.3), transparent 60%),
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle, rgba(130, 190, 255, 0.9) 0%, rgba(130, 190, 255, 0) 70%),
        radial-gradient(circle, rgba(255, 150, 150, 0.85) 0%, rgba(255, 150, 150, 0) 70%),
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    background-size: auto, auto, 8px 8px, 7px 7px, 6px 6px, 5px 5px;
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 12% 20%, 42% 72%, 68% 22%, 88% 68%;
    animation: profileAcademiaInnerPulse 2.2s ease-in-out infinite;
    pointer-events: none;
}
.profile-header.profile-theme-academia .ph-avatar-ring {
    background: conic-gradient(from 180deg, #dc1e1e, #ffffff, #2864dc, #ffffff, #dc1e1e);
    box-shadow: 0 0 22px rgba(220, 30, 30, 0.4), 0 0 22px rgba(40, 100, 220, 0.4);
}
@keyframes profileAcademiaOuterFrame {
    0%, 100% { border-color: rgba(220, 30, 30, 0.55); box-shadow: 0 0 24px rgba(220, 30, 30, 0.25), 0 20px 50px rgba(0, 0, 0, 0.45); }
    50%      { border-color: rgba(255, 70, 70, 0.95); box-shadow: 0 0 40px rgba(220, 30, 30, 0.5), 0 20px 50px rgba(0, 0, 0, 0.45); }
}
@keyframes profileAcademiaInnerFrame {
    0%, 100% { border-color: rgba(30, 70, 200, 0.55); }
    50%      { border-color: rgba(80, 140, 255, 0.95); }
}
@keyframes profileAcademiaInnerPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* ── User Skin: Jég (jégkék keret + dermesztő belső pulzálás + fagykristály csillanások) ── */
.profile-header.profile-theme-jeg {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(120deg, rgba(4, 24, 40, 0.6), rgba(2, 14, 26, 0.85)),
        url("../image/wish/csomagok/jeg_user_skin.webp");
    background-size: cover;
    background-position: center;
    border-color: rgba(120, 210, 255, 0.75);
    animation: profileJegFrame 2.2s ease-in-out infinite;
}
.profile-header.profile-theme-jeg::before,
.profile-header.profile-theme-jeg::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(150, 220, 255, 0.15) 70%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(120, 210, 255, 0.8));
    opacity: 0;
    pointer-events: none;
}
.profile-header.profile-theme-jeg::before {
    left: 16%;
    top: 22px;
    animation: profileJegSparkle 2.8s ease-in-out infinite;
}
.profile-header.profile-theme-jeg::after {
    right: 14%;
    bottom: 26px;
    width: 14px;
    height: 14px;
    animation: profileJegSparkle 2.8s ease-in-out 1.3s infinite;
}
.profile-header.profile-theme-jeg .ph-avatar-ring {
    background: conic-gradient(from 180deg, #78d2ff, #ffffff, #78d2ff);
    box-shadow: 0 0 22px rgba(120, 210, 255, 0.5);
}
@keyframes profileJegFrame {
    0%, 100% { box-shadow: 0 0 30px rgba(120, 210, 255, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
    50%      { box-shadow: 0 0 46px rgba(180, 235, 255, 0.4), 0 20px 50px rgba(0, 0, 0, 0.45); }
}
@keyframes profileJegSparkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1); }
}

/* ── User Skin: Kalandor ── */
.profile-header.profile-theme-kalandor {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(115deg, rgba(24,12,42,.7), rgba(4,37,37,.58)), url("../image/wish/csomagok/kalandor_user_skin.webp");
    background-size: cover;
    background-position: center;
    border-color: rgba(239,183,72,.82);
    box-shadow: 0 20px 50px rgba(0,0,0,.48), 0 0 34px rgba(91,224,196,.18);
}
.profile-header.profile-theme-kalandor::before {
    content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(105deg,transparent 24%,rgba(95,241,211,.28) 45%,rgba(255,204,89,.36) 51%,transparent 68%);
    background-size:260% 100%; animation:profileKalandorTrail 5s linear infinite;
}
.profile-header.profile-theme-kalandor .ph-avatar-ring { background:conic-gradient(#efb748,#58e1c4,#864ee4,#efb748); box-shadow:0 0 24px rgba(239,183,72,.45); }
@keyframes profileKalandorTrail { from { background-position:130% 0; } to { background-position:-40% 0; } }

/* ── User Skin: Elegáns ── */
.profile-header.profile-theme-elegans {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(115deg,rgba(2,14,11,.78),rgba(13,42,30,.52),rgba(28,18,7,.7)),url("../image/wish/csomagok/elegans_user_skin.webp");
    background-size: cover;
    background-position: center;
    border:2px solid rgba(221,184,84,.88);
    box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 38px rgba(52,231,148,.22);
}
.profile-header.profile-theme-elegans::before {
    content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
    background:radial-gradient(circle at 20% 48%,rgba(82,255,171,.3),transparent 25%),linear-gradient(100deg,transparent 34%,rgba(251,241,194,.42) 50%,transparent 66%);
    background-size:100% 100%,260% 100%; animation:profileElegansGlow 3.8s ease-in-out infinite;
}
.profile-header.profile-theme-elegans .ph-avatar-ring { background:conic-gradient(#e6c468,#f6f0d4,#2be08b,#071b14,#e6c468); box-shadow:0 0 25px rgba(43,224,139,.52); }
@keyframes profileElegansGlow { 0%,100%{opacity:.4;background-position:0 0,130% 0}50%{opacity:1;background-position:0 0,-20% 0} }

/* ── User Skin: Űrhajós ── */
.profile-header.profile-theme-urhajos {
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(115deg,rgba(3,14,39,.74),rgba(6,27,61,.5),rgba(44,13,63,.56)),url("../image/wish/csomagok/urhajos_user_skin.webp");
    background-size:cover;
    background-position:center;
    border-color:rgba(52,220,255,.8);
    box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 38px rgba(109,78,255,.23);
}
.profile-header.profile-theme-urhajos::before {
    content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
    background:linear-gradient(100deg,transparent 30%,rgba(52,228,255,.34) 46%,rgba(255,148,39,.38) 52%,transparent 69%);
    background-size:280% 100%;animation:profileUrhajosScan 4.1s linear infinite;
}
.profile-header.profile-theme-urhajos .ph-avatar-ring { background:conic-gradient(#36dcff,#fff,#ff9234,#8455ff,#36dcff);box-shadow:0 0 25px rgba(54,220,255,.5); }
@keyframes profileUrhajosScan { from{background-position:140% 0}to{background-position:-40% 0} }

/* ── User Skin: Rém Akadémia ── */
.profile-header.profile-theme-remakademia{position:relative;overflow:hidden;background-image:linear-gradient(115deg,rgba(3,3,8,.82),rgba(25,19,43,.56),rgba(3,13,29,.72)),url("../image/wish/csomagok/remakademia_user_skin.webp");background-size:cover;background-position:center;border-color:rgba(164,148,204,.8);box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 38px rgba(86,59,145,.28)}
.profile-header.profile-theme-remakademia::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 18% 28%,rgba(214,222,244,.2),transparent 19%),linear-gradient(105deg,transparent 34%,rgba(126,91,184,.3) 50%,transparent 67%);background-size:100% 100%,280% 100%;animation:profileRemakademiaHaunt 5.4s ease-in-out infinite}
.profile-header.profile-theme-remakademia .ph-avatar-ring{background:conic-gradient(#dce2f1,#63508d,#111522,#a58cca,#dce2f1);box-shadow:0 0 26px rgba(142,113,193,.5)}
@keyframes profileRemakademiaHaunt{0%,100%{opacity:.4;background-position:0 0,140% 0}50%{opacity:1;background-position:0 0,-40% 0}}

/* ── User Skin: Kőkorszaki ── */
.profile-header.profile-theme-kokorszaki {
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(112deg,rgba(4,11,7,.84),rgba(17,39,27,.55),rgba(34,19,7,.72)),url("../image/wish/csomagok/kokorszaki_user_skin.webp");
    background-size:cover;
    background-position:center;
    border:2px solid rgba(211,158,73,.88);
    box-shadow:0 20px 50px rgba(0,0,0,.54),0 0 38px rgba(35,190,157,.2);
}
.profile-header.profile-theme-kokorszaki::before {
    content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(circle at 17% 48%,rgba(56,244,202,.3),transparent 23%),linear-gradient(104deg,transparent 31%,rgba(241,198,114,.38) 48%,rgba(43,219,181,.28) 53%,transparent 69%);
    background-size:100% 100%,290% 100%;animation:profileKokorszakiRunes 5.2s ease-in-out infinite;
}
.profile-header.profile-theme-kokorszaki .ph-avatar-ring {
    background:conic-gradient(#e8c47d,#745022,#2fd3b0,#172c22,#e8c47d);
    box-shadow:0 0 26px rgba(47,211,176,.46);
}
@keyframes profileKokorszakiRunes{0%,100%{opacity:.38;background-position:0 0,140% 0}50%{opacity:1;background-position:0 0,-40% 0}}

/* ── User Skin: Mesekönyv / Toon Fantasy ── */
.profile-header.profile-theme-toon {
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(112deg,rgba(9,18,68,.78),rgba(79,16,97,.48),rgba(145,25,49,.6)),url("../image/wish/csomagok/toon_user_skin.webp");
    background-size:cover;
    background-position:center;
    border:2px solid rgba(255,207,66,.92);
    box-shadow:0 20px 50px rgba(0,0,0,.54),0 0 42px rgba(102,73,255,.26),0 0 24px rgba(64,233,239,.16);
}
.profile-header.profile-theme-toon::before {
    content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(circle at 15% 28%,rgba(77,241,238,.4),transparent 20%),radial-gradient(circle at 84% 66%,rgba(255,112,205,.4),transparent 22%),linear-gradient(105deg,transparent 28%,rgba(255,231,98,.45) 47%,rgba(124,88,255,.36) 55%,transparent 72%);
    background-size:100% 100%,100% 100%,300% 100%;
    animation:profileToonPageMagic 4.5s cubic-bezier(.45,0,.55,1) infinite;
}
.profile-header.profile-theme-toon .ph-avatar-ring {
    background:conic-gradient(#3fe9e5,#ff7dcc,#ffe05e,#624dff,#e74350,#3fe9e5);
    box-shadow:0 0 29px rgba(255,111,204,.48),0 0 16px rgba(61,235,232,.34);
}
@keyframes profileToonPageMagic {0%,100%{opacity:.44;background-position:0 0,0 0,145% 0;filter:hue-rotate(0deg)}50%{opacity:1;background-position:0 0,0 0,-45% 0;filter:hue-rotate(18deg)}}

/* ── User Skin: Halloween / Harrowing ── */
.profile-header.profile-theme-halloween {
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(112deg,rgba(46,19,56,.82),rgba(9,61,50,.5),rgba(107,24,133,.6)),url("../image/wish/csomagok/halloween_user_skin.webp");
    background-size:cover;
    background-position:center;
    border:2px solid rgba(249,116,37,.9);
    box-shadow:0 20px 50px rgba(0,0,0,.56),0 0 40px rgba(249,116,37,.24),0 0 24px rgba(34,229,187,.16);
}
.profile-header.profile-theme-halloween::before {
    content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(circle at 15% 30%,rgba(249,116,37,.46),transparent 20%),radial-gradient(circle at 84% 66%,rgba(34,229,187,.36),transparent 22%),linear-gradient(105deg,transparent 29%,rgba(107,24,133,.42) 47%,rgba(34,229,187,.3) 55%,transparent 72%);
    background-size:100% 100%,100% 100%,290% 100%;
    animation:profileHalloweenFlicker 5s ease-in-out infinite;
}
.profile-header.profile-theme-halloween .ph-avatar-ring {
    background:conic-gradient(#F97425,#6B1885,#22E5BB,#2E1338,#F97425);
    box-shadow:0 0 28px rgba(249,116,37,.48),0 0 16px rgba(34,229,187,.3);
}
@keyframes profileHalloweenFlicker{0%,100%{opacity:.4;background-position:0 0,0 0,140% 0}8%{opacity:.8}11%{opacity:.5}50%{opacity:1;background-position:0 0,0 0,-40% 0}}

/* ── User Skin: Prémium (vastag csillogó arany keret + 50% átlátszó fehér alap, nincs skin family-hez kötve) ── */
.profile-header.profile-theme-premium {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(120deg, rgba(255, 255, 255, 0.5), rgba(250, 245, 235, 0.45)),
        url("../image/wish/csomagok/permiem_user_skin.webp");
    background-size: cover;
    background-position: center;
    border: 4px solid rgba(212, 175, 55, 0.8);
    animation: profilePremiumGoldGlint 2.4s ease-in-out infinite;
}
.profile-header.profile-theme-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 0%, transparent 42%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 58%, transparent 100%);
    background-size: 260% 100%;
    mix-blend-mode: screen;
    animation: profilePremiumSparkleSweep 3.2s linear infinite;
    pointer-events: none;
}
.profile-header.profile-theme-premium .ph-avatar-ring {
    background: conic-gradient(from 180deg, #d4af37, #ffffff, #d4af37);
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.5);
}
.profile-header.profile-theme-premium .ph-name {
    color: #2a2110;
}
@keyframes profilePremiumGoldGlint {
    0%, 100% { border-color: rgba(212, 175, 55, 0.7); box-shadow: 0 0 26px rgba(212, 175, 55, 0.2), 0 20px 50px rgba(0, 0, 0, 0.45); }
    50%      { border-color: rgba(255, 224, 130, 1); box-shadow: 0 0 40px rgba(255, 214, 128, 0.45), 0 20px 50px rgba(0, 0, 0, 0.45); }
}
@keyframes profilePremiumSparkleSweep {
    0%   { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}

.ph-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    cursor: pointer;
    transition: transform var(--t-fast, 0.15s) var(--ease-premium);
}
.ph-avatar-wrap:hover {
    transform: scale(1.04);
}

.ph-avatar-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from 180deg, var(--c-cyan), var(--c-blue), var(--c-cyan));
    box-shadow: 0 0 22px rgba(76, 212, 255, 0.4);
}
.ph-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 3px solid var(--c-panel);
    display: block;
}

.ph-avatar-deco {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    height: 190%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

.ph-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    margin-left: 15px;
    border-radius: var(--radius-m, 10px);
    transition: background var(--t-fast, 0.15s) var(--ease-premium);
}
.ph-info:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ph-name {
    font-family: 'AOW', serif;
    font-size: 1.5rem;
    color: var(--c-text);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-xp-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.ph-xp-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    border: 1px solid var(--border-glass);
}
.ph-xp-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-blue), var(--c-cyan));
    box-shadow: 0 0 10px rgba(76, 212, 255, 0.6);
    transition: width var(--t-slow) var(--ease-premium);
}

.ph-xp-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--c-text-dim);
}
.ph-xp-text span:first-child { color: var(--c-text); font-weight: 600; }
.ph-xp-sub { font-size: 0.72rem; opacity: 0.85; }

/* ── Tabs ───────────────────────────────────────────────────── */

.profile-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border-glass);
    margin-bottom: 22px;
}

.profile-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 18px;
    color: var(--c-text-dim);
    font-family: 'AOW', serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.profile-tab:hover { color: var(--c-text); }
.profile-tab.is-active {
    color: var(--c-cyan);
    border-bottom-color: var(--c-cyan);
    text-shadow: 0 0 10px rgba(76, 212, 255, 0.4);
}

.profile-tab-panel[hidden] { display: none; }

/* ── Infó tab: stat-kártya rács ────────────────────────────── */

.pf-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.pf-stat-card {
    position: relative;
    padding: 18px 18px 16px;
    background: linear-gradient(160deg, rgba(76, 212, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-m);
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-premium), border-color var(--t-fast), box-shadow var(--t-fast);
}
.pf-stat-card::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -30%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(76, 212, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}
.pf-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-glow-cyan);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.pf-stat-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-bottom: 8px;
}

.pf-stat-num {
    position: relative;
    font-family: 'AOW', serif;
    font-size: 1.9rem;
    color: var(--c-cyan);
    text-shadow: 0 0 12px rgba(76, 212, 255, 0.4);
    line-height: 1;
}

.pf-stat-label {
    position: relative;
    margin-top: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--c-text-dim);
    text-transform: uppercase;
}

.pf-stat-sub {
    position: relative;
    margin-top: 4px;
    font-size: 0.66rem;
    color: var(--c-text-dim);
    opacity: 0.8;
}

.pf-stat-card--progress .pf-stat-track {
    position: relative;
    margin-top: 10px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.pf-stat-card--progress .pf-stat-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--c-cyan);
    transition: width var(--t-mid);
}

@media (max-width: 640px) {
    .profile-header { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; }
    .ph-xp-block { max-width: 100%; }
    .pf-stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}