.pl-page {
    --g:    var(--main-color, #f59e0b);
    --gl:   #fcd34d;
    --gd:   #b45309;
    --bg:   #0d0a04;
    --sf:   #100d05;
    --sf2:  #161208;
    --sf3:  #1c1608;
    --br:   rgba(245,158,11,.11);
    --brh:  rgba(245,158,11,.38);
    --tx:   #f0e6cc;
    --txm:  #c8a96e;
    --txs:  #7a6840;
    --ease: cubic-bezier(.4,0,.2,1);
    --font: var(--main-font-family, 'IRANSans'), sans-serif;

    font-family: var(--font);
    direction: rtl;
    background: var(--bg);
    min-height: 100vh;
    padding-bottom: 48px;
}

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.pl-hero {
    position: relative;
    padding: 48px 20px 36px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(245,158,11,.12) 0%, transparent 65%),
        var(--sf);
    border-bottom: 1px solid var(--br);
}

/* orbs */
.pl-hero-orb {
    position: absolute;
    border-radius: 50%;
    background: var(--g);
    filter: blur(70px);
    pointer-events: none;
}
.pl-hero-orb--1 { width:260px; height:260px; opacity:.055; top:-100px; right:-80px; }
.pl-hero-orb--2 { width:180px; height:180px; opacity:.04;  bottom:-60px; left:-60px; }
.pl-hero-orb--3 { width:120px; height:120px; opacity:.03;  top:30px; left:40%; }

.pl-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0 auto;
}

/* badge */
.pl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    margin-bottom: 18px;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.28);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: var(--g);
    letter-spacing: .07em;
    animation: plFadeDown .6s var(--ease) both;
}

/* title */
.pl-hero-title {
    font-size: clamp(22px, 6vw, 36px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--gl) 0%, var(--g) 50%, var(--gd) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: .04em;
    margin: 0 0 10px;
    animation: plFadeDown .6s var(--ease) .1s both;
}

.pl-hero-sub {
    font-size: 13px;
    color: var(--txs);
    letter-spacing: .04em;
    margin: 0 0 18px;
    animation: plFadeDown .6s var(--ease) .15s both;
}

/* breadcrumb override */
.an-breadcrumb {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    animation: plFadeDown .6s var(--ease) .2s both;
}
.an-breadcrumb span,
.an-breadcrumb a {
    font-size: 11px;
    color: var(--txs);
    text-decoration: none;
    letter-spacing: .04em;
}
.an-breadcrumb a:hover { color: var(--g); }
.breadcrumb-ind {
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--g);
    border-radius: 50%;
    margin: 0 8px;
    opacity: .5;
    vertical-align: middle;
}
.breadcrumb_last { color: var(--txm) !important; }

/* divider */
.pl-hero-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    animation: plFadeDown .6s var(--ease) .25s both;
}
.pl-hero-divider span:not(.pl-hero-divider-gem) {
    flex: 1; max-width: 80px;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--br));
}
.pl-hero-divider span:first-child {
    background: linear-gradient(to right, transparent, var(--br));
}
.pl-hero-divider-gem {
    font-size: 9px;
    color: var(--g);
    opacity: .6;
}

/* floating particles */
.pl-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pl-p {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--g);
    border-radius: 50%;
    opacity: 0;
    animation: plParticle linear infinite;
}
.pl-p:nth-child(1)  { left:8%;  animation-duration:8s;  animation-delay:0s;   opacity:.25; }
.pl-p:nth-child(2)  { left:18%; animation-duration:11s; animation-delay:1.5s; opacity:.18; }
.pl-p:nth-child(3)  { left:28%; animation-duration:9s;  animation-delay:3s;   opacity:.2;  }
.pl-p:nth-child(4)  { left:38%; animation-duration:13s; animation-delay:.8s;  opacity:.15; }
.pl-p:nth-child(5)  { left:50%; animation-duration:7s;  animation-delay:2s;   opacity:.22; }
.pl-p:nth-child(6)  { left:60%; animation-duration:10s; animation-delay:.3s;  opacity:.17; }
.pl-p:nth-child(7)  { left:70%; animation-duration:12s; animation-delay:4s;   opacity:.2;  }
.pl-p:nth-child(8)  { left:80%; animation-duration:8s;  animation-delay:1s;   opacity:.18; }
.pl-p:nth-child(9)  { left:90%; animation-duration:9s;  animation-delay:2.5s; opacity:.15; }
.pl-p:nth-child(10) { left:15%; animation-duration:14s; animation-delay:5s;   opacity:.12; }
.pl-p:nth-child(11) { left:45%; animation-duration:6s;  animation-delay:3.5s; opacity:.2;  }
.pl-p:nth-child(12) { left:75%; animation-duration:11s; animation-delay:.5s;  opacity:.16; }
@keyframes plParticle {
    0%   { transform: translateY(100%) scale(0); opacity: 0; }
    10%  { opacity: .3; }
    90%  { opacity: .15; }
    100% { transform: translateY(-100vh) scale(1); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   SECTION
═══════════════════════════════════════════════════════ */
.pl-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 0;
}

/* stats bar */
.pl-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 10px 20px;
    background: var(--sf2);
    border: 1px solid var(--br);
    border-radius: 100px;
    width: fit-content;
    margin-inline: auto;
    animation: plFadeDown .5s var(--ease) .3s both;
}
.pl-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pl-stat-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--g);
    line-height: 1;
}
.pl-stat-lbl {
    font-size: 11px;
    color: var(--txs);
    letter-spacing: .04em;
}
.pl-stat-sep {
    font-size: 7px;
    color: var(--g);
    opacity: .35;
}

/* ═══════════════════════════════════════════════════════
   GRID — mobile: 2 col
═══════════════════════════════════════════════════════ */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* ═══════════════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════════════ */
.pl-card {
    animation: plCardIn .55s var(--ease) calc(var(--pl-i) * .065s) both;
}
@keyframes plCardIn {
    from { opacity:0; transform:translateY(20px) scale(.93); }
    to   { opacity:1; transform:none; }
}

.pl-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-decoration: none;
    background: var(--sf2);
    border: 1px solid var(--br);
    border-radius: 20px;
    padding: 20px 14px 14px;
    overflow: hidden;
    transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
    -webkit-tap-highlight-color: transparent;
}
.pl-card-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(245,158,11,.07) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.pl-card-link:hover,
.pl-card-link:focus-visible {
    border-color: var(--brh);
    transform: translateY(-5px);
    box-shadow:
        0 16px 48px rgba(245,158,11,.13),
        0 0 0 1px rgba(245,158,11,.2),
        inset 0 1px 0 rgba(245,158,11,.12);
    outline: none;
}
.pl-card-link:hover::before { opacity: 1; }

/* glow */
.pl-card-glow {
    position: absolute;
    top: -30px; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 80px;
    background: var(--g);
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}
.pl-card-link:hover .pl-card-glow { opacity: .06; }

/* corner accent */
.pl-card-corner {
    position: absolute;
    top: 0; left: 0;
    width: 32px; height: 32px;
    border-top: 1px solid rgba(245,158,11,.25);
    border-left: 1px solid rgba(245,158,11,.25);
    border-radius: 20px 0 0 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.pl-card-link:hover .pl-card-corner { opacity: 1; }

/* ── Avatar ── */
.pl-avatar-wrap {
    position: relative;
    width: 80px; height: 80px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.pl-avatar-img {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform .4s var(--ease);
}
.pl-card-link:hover .pl-avatar-img { transform: scale(1.06); }

.pl-avatar-placeholder {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(245,158,11,.08) 0%, rgba(245,158,11,.03) 60%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* rotating ring */
.pl-avatar-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--sf2), var(--sf2)) padding-box,
        conic-gradient(
            from 0deg,
            rgba(245,158,11,.6) 0%,
            rgba(245,158,11,.05) 40%,
            rgba(245,158,11,.6) 60%,
            rgba(245,158,11,.05) 100%
        ) border-box;
    animation: plRingSpin 4s linear infinite;
}
.pl-card-link:hover .pl-avatar-ring {
    background:
        linear-gradient(var(--sf2), var(--sf2)) padding-box,
        conic-gradient(
            from 0deg,
            var(--g) 0%,
            rgba(245,158,11,.15) 40%,
            var(--g) 60%,
            rgba(245,158,11,.15) 100%
        ) border-box;
}
@keyframes plRingSpin { to { transform: rotate(360deg); } }

/* shine */
.pl-avatar-shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .3s;
}
.pl-card-link:hover .pl-avatar-shine { opacity: 1; }

/* ── Card Info ── */
.pl-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    text-align: center;
}

.pl-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    margin: 0;
    letter-spacing: .02em;
    line-height: 1.4;
    transition: color .2s;
}
.pl-card-link:hover .pl-card-name { color: var(--g); }

.pl-card-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #b9a16b;
    background: rgba(245,158,11,.06);
    border: 1px solid rgba(245,158,11,.12);
    border-radius: 100px;
    padding: 2px 9px;
    letter-spacing: .04em;
    transition: background .2s, color .2s;
}
.pl-card-link:hover .pl-card-count {
    background: rgba(245,158,11,.12);
    color: var(--g);
}

/* ── CTA (hover reveal) ── */
.pl-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.18);
    font-size: 11px;
    font-weight: 600;
    color: var(--g);
    letter-spacing: .05em;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s;
}
.pl-card-link:hover .pl-card-cta,
.pl-card-link:focus-visible .pl-card-cta {
    opacity: 1;
    transform: none;
    background: rgba(245,158,11,.13);
}

/* always show on touch */
@media (hover:none) {
    .pl-card-cta { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL FADE KEYFRAME
═══════════════════════════════════════════════════════ */
@keyframes plFadeDown {
    from { opacity:0; transform:translateY(-12px); }
    to   { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */

/* 3 col @ 480px */
@media (min-width: 480px) {
    .pl-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .pl-avatar-wrap, .pl-avatar-img, .pl-avatar-placeholder { width:88px; height:88px; }
}

/* 4 col @ 640px */
@media (min-width: 640px) {
    .pl-section { padding: 28px 20px 0; }
    .pl-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .pl-card-link { padding: 22px 16px 16px; border-radius: 22px; }
    .pl-card-name { font-size: 14px; }
    .pl-avatar-wrap, .pl-avatar-img, .pl-avatar-placeholder { width:90px; height:90px; }
}

/* 5 col @ 860px */
@media (min-width: 860px) {
    .pl-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .pl-hero { padding: 64px 24px 48px; }
}

/* 6 col @ 1100px */
@media (min-width: 1100px) {
    .pl-section { padding: 32px 24px 0; }
    .pl-grid { grid-template-columns: repeat(6, 1fr); gap: 22px; }
    .pl-card-link { padding: 26px 18px 18px; }
    .pl-avatar-wrap, .pl-avatar-img, .pl-avatar-placeholder { width:96px; height:96px; }.pl-card-name { font-size: 14px; }
}

[data-theme="light"] .pl-page {
    --g:   var(--main-color, #b45309);
    --gl:  #d97706;
    --gd:  #92400e;
    --bg:  #fdf8f0;
    --sf:  #fff8ec;
    --sf2: #fef3d8;
    --sf3: #fde9b8;
    --br:  rgba(160,100,10,.13);
    --brh: rgba(160,100,10,.42);
    --tx:  #1a1208;
    --txm: #7a5c20;
    --txs: #9a7c40;
}

[data-theme="light"] .pl-hero {
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(200,140,20,.10) 0%, transparent 65%),
        var(--sf);
}

[data-theme="light"] .pl-avatar-ring {
    background:
        linear-gradient(var(--sf2), var(--sf2)) padding-box,
        conic-gradient(
            from 0deg,
            rgba(160,100,10,.55) 0%,
            rgba(160,100,10,.06) 40%,
            rgba(160,100,10,.55) 60%,
            rgba(160,100,10,.06) 100%
        ) border-box;
}
[data-theme="light"] .pl-card-link:hover .pl-avatar-ring {
    background:
        linear-gradient(var(--sf2), var(--sf2)) padding-box,
        conic-gradient(
            from 0deg,
            var(--g) 0%,
            rgba(160,100,10,.12) 40%,
            var(--g) 60%,
            rgba(160,100,10,.12) 100%
        ) border-box;
}

[data-theme="light"] .pl-avatar-shine {
    background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, transparent 50%);
}

[data-theme="light"] .pl-card-link:hover,
[data-theme="light"] .pl-card-link:focus-visible {
    box-shadow:
        0 16px 48px rgba(160,100,10,.11),
        0 0 0 1px rgba(160,100,10,.18),
        inset 0 1px 0 rgba(255,255,255,.7);
}

[data-theme="light"] .pl-avatar-placeholder {
    background: radial-gradient(ellipse at center, rgba(160,100,10,.07) 0%, rgba(160,100,10,.02) 60%, transparent 100%);
}