/* ==========================================================================
   FarsKids — منوی کاربری هدر (Header user dropdown)
   Panel is moved to <body> by JS (like the notification panel) so the
   header's backdrop-filter can't clip it, then positioned under the avatar.
   ========================================================================== */

.fk-um{position:relative;display:flex;align-items:center}
.fk-um .fk-um-trigger{
    cursor:pointer;padding:0!important;position:relative;
    transition:background .2s ease,border-color .25s ease,box-shadow .25s ease,transform .2s ease!important;
    -webkit-tap-highlight-color:transparent;
}
.fk-um .fk-um-trigger:active{transform:scale(.94)}
.fk-um .fk-um-trigger:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}
.fk-um .fk-um-trigger.is-open,
.fk-um .fk-um-trigger[aria-expanded="true"]{
    border-color:rgba(201,160,255,.75)!important;
    box-shadow:0 0 0 3px rgba(124,58,237,.28),0 6px 18px -6px rgba(192,38,211,.6)!important;
}

/* ---------- panel ---------- */
.fk-um-panel{
    --um-a:#7c3aed;--um-b:#c026d3;
    position:fixed;z-index:10060;
    top:72px;left:12px;
    width:316px;max-width:calc(100vw - 20px);
    max-height:min(640px,calc(100dvh - 90px));
    overflow-y:auto;overscroll-behavior:contain;
    direction:rtl;text-align:right;
    color:#e7e5e4;font-family:inherit;
    background:linear-gradient(180deg,rgba(38,34,40,.97) 0%,rgba(26,24,27,.985) 100%);
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    box-shadow:0 30px 70px -14px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(24px) saturate(125%);backdrop-filter:blur(24px) saturate(125%);
    opacity:0;visibility:hidden;
    transform:translateY(-10px) scale(.95);
    transform-origin:var(--fk-um-ox,28px) -8px;
    transition:opacity .18s ease,transform .28s cubic-bezier(.2,.9,.3,1.14),visibility 0s linear .28s;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.fk-um-panel[hidden]{display:block!important}
.fk-um-panel.is-open{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .18s ease,transform .32s cubic-bezier(.2,.9,.3,1.14),visibility 0s;
}
.fk-um-panel *{box-sizing:border-box}

/* ---------- head card ---------- */
.fk-um-head{
    position:relative;display:flex;align-items:center;gap:13px;
    padding:20px 18px 16px;overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.fk-um-glow{
    position:absolute;inset:-40% -10% auto auto;width:240px;height:160px;pointer-events:none;
    background:radial-gradient(closest-side,rgba(168,85,247,.34),transparent 72%);
}
.fk-um-avatar{
    position:relative;flex:0 0 auto;width:54px;height:54px;border-radius:50%;padding:2.5px;
    background:conic-gradient(from 210deg,var(--um-a),var(--um-b),#f0abfc,var(--um-a));
    box-shadow:0 10px 24px -10px rgba(192,38,211,.8);
}
.fk-um-avatar img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;background:#1c1917;border:2px solid #1f1c20}
.fk-um-who{position:relative;min-width:0;display:flex;flex-direction:column;gap:2px}
.fk-um-name{font-size:15px;line-height:1.7;font-weight:800;color:#fff;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-um-mail{font-size:11.5px;color:#a8a29e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}

/* ---------- list ---------- */
.fk-um-list{display:flex;flex-direction:column;padding:8px}

/* IDs win over the legacy ".fk-app-header-actions a" rules in style.css */
#fk-um-panel .fk-um-item,
.fk-um-panel a.fk-um-item,
.fk-um-panel button.fk-um-item{
    all:unset;box-sizing:border-box;
    display:flex!important;align-items:center;gap:12px;
    width:100%!important;height:auto!important;min-height:54px;
    padding:9px 10px!important;border-radius:14px!important;
    color:#e7e5e4!important;background:transparent!important;
    text-decoration:none!important;cursor:pointer;font-family:inherit;
    transition:background .18s ease,transform .18s ease,color .18s ease!important;
    -webkit-tap-highlight-color:transparent;
    position:relative;
}
#fk-um-panel .fk-um-item:hover,
.fk-um-panel .fk-um-item:focus-visible{background:rgba(255,255,255,.065)!important;color:#fff!important}
.fk-um-panel .fk-um-item:focus-visible{outline:2px solid #c9a0ff;outline-offset:-2px}
.fk-um-panel .fk-um-item:active{transform:scale(.985)}

.fk-um-ico-wrap{
    flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
    color:#d8b7ff;background:linear-gradient(145deg,rgba(124,58,237,.30),rgba(192,38,211,.14));
    border:1px solid rgba(201,160,255,.16);
    transition:transform .25s cubic-bezier(.34,1.45,.5,1),background .2s ease,color .2s ease;
}
.fk-um-item:hover .fk-um-ico-wrap{transform:scale(1.08) rotate(-4deg);color:#fff;background:linear-gradient(145deg,#7c3aed,#c026d3)}
.fk-um-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fk-um-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:right}
.fk-um-txt b{font-size:13.5px;font-weight:700;line-height:1.7;color:inherit}
.fk-um-txt small{font-size:11px;line-height:1.6;color:#a8a29e}
.fk-um-go,.fk-um-chev{flex:0 0 auto;display:grid;place-items:center;color:#78716c;transition:transform .25s ease,color .2s ease}
.fk-um-go .fk-um-ico{width:16px;height:16px}
.fk-um-chev .fk-um-ico{width:18px;height:18px}
.fk-um-item:hover .fk-um-go{color:#d8b7ff;transform:translateX(-3px)}

.fk-um-sep{display:block;height:1px;margin:6px 10px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}

/* logout */
.fk-um-panel .fk-um-logout .fk-um-ico-wrap{color:#fda4af;background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.2)}
.fk-um-panel .fk-um-logout:hover{background:rgba(244,63,94,.1)!important;color:#fecdd3!important}
.fk-um-panel .fk-um-logout:hover .fk-um-ico-wrap{background:linear-gradient(145deg,#e11d48,#f43f5e);color:#fff}

/* ---------- playlists accordion ---------- */
.fk-um-acc.is-open > .fk-um-acc-toggle{background:rgba(255,255,255,.05)!important}
.fk-um-acc.is-open .fk-um-chev{transform:rotate(180deg);color:#d8b7ff}
.fk-um-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1)}
.fk-um-acc-body[hidden]{display:grid!important}
.fk-um-acc.is-open > .fk-um-acc-body{grid-template-rows:1fr}
.fk-um-acc-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:0 4px;opacity:0;transition:opacity .2s ease,padding .3s ease}
.fk-um-acc.is-open .fk-um-acc-inner{opacity:1;padding:6px 4px 4px}
.fk-um-acc:not(.is-open) .fk-um-acc-inner *{visibility:hidden}

.fk-um-panel a.fk-um-pl{
    all:unset;box-sizing:border-box;display:flex!important;align-items:center;gap:10px;
    width:100%!important;height:auto!important;padding:6px 8px!important;border-radius:12px!important;
    color:#d6d3d1!important;background:transparent!important;text-decoration:none!important;cursor:pointer;
    font-size:12.5px;transition:background .18s ease,color .18s ease!important;
}
.fk-um-panel a.fk-um-pl:hover,.fk-um-panel a.fk-um-pl:focus-visible{background:rgba(255,255,255,.07)!important;color:#fff!important}
.fk-um-panel a.fk-um-pl:focus-visible{outline:2px solid #c9a0ff;outline-offset:-2px}
.fk-um-pl img{flex:0 0 auto;width:34px;height:34px;border-radius:9px;object-fit:cover;background:#292524}
.fk-um-pl span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fk-um-empty{margin:2px 8px 8px;font-size:11.5px;line-height:1.9;color:#a8a29e}

.fk-um-pl-actions{display:flex;gap:8px;padding:6px 4px 6px}
.fk-um-panel .fk-um-pill{
    all:unset;box-sizing:border-box;flex:1 1 0;display:flex!important;align-items:center;justify-content:center;gap:6px;
    height:36px!important;padding:0 12px!important;border-radius:11px!important;cursor:pointer;
    font-size:12px;font-weight:700;font-family:inherit;color:#d6d3d1!important;
    background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.09);text-decoration:none!important;
    transition:background .2s ease,transform .15s ease,color .2s ease!important;
}
.fk-um-panel .fk-um-pill:hover{background:rgba(255,255,255,.11)!important;color:#fff!important}
.fk-um-panel .fk-um-pill:active{transform:scale(.97)}
.fk-um-panel .fk-um-pill:focus-visible{outline:2px solid #c9a0ff;outline-offset:1px}
.fk-um-panel .fk-um-pill.is-primary{color:#fff!important;border-color:transparent;background:linear-gradient(135deg,#7c3aed,#c026d3)!important;box-shadow:0 8px 18px -8px rgba(192,38,211,.8)}
.fk-um-panel .fk-um-pill.is-primary:hover{filter:brightness(1.1)}
.fk-um-pill .fk-um-ico{width:15px;height:15px;stroke-width:2.2}

/* inline "new playlist" form */
.fk-um-new{display:flex;gap:6px;margin:4px 4px 2px}
.fk-um-new[hidden]{display:none!important}
.fk-um-new input{
    all:unset;-webkit-user-select:text;user-select:text;box-sizing:border-box;flex:1 1 auto;min-width:0;height:38px;padding:0 12px;border-radius:11px;
    font-size:12.5px;font-family:inherit;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
    transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.fk-um-new input::placeholder{color:#78716c}
.fk-um-new input:focus{border-color:rgba(201,160,255,.7);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.fk-um-new button{
    all:unset;box-sizing:border-box;flex:0 0 auto;position:relative;height:38px;min-width:62px;padding:0 14px;border-radius:11px;cursor:pointer;
    display:grid;place-items:center;font-size:12.5px;font-weight:700;font-family:inherit;color:#fff;
    background:linear-gradient(135deg,#7c3aed,#c026d3);
}
.fk-um-new button:focus-visible{outline:2px solid #c9a0ff;outline-offset:2px}
.fk-um-new-spin{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;animation:fkUmSpin .7s linear infinite}
.fk-um-new.is-busy .fk-um-new-txt{opacity:0}
.fk-um-new.is-busy .fk-um-new-spin{opacity:1}
.fk-um-new.is-busy{pointer-events:none}
@keyframes fkUmSpin{to{transform:rotate(360deg)}}
.fk-um-new-msg{margin:2px 8px 4px;font-size:11.5px;line-height:1.8;color:#fda4af}
.fk-um-new-msg[hidden]{display:none!important}

/* ---------- entrance stagger ---------- */
.fk-um-panel.is-open .fk-um-head{animation:fkUmIn .4s cubic-bezier(.2,.8,.2,1) both}
.fk-um-panel.is-open .fk-um-list > *{animation:fkUmIn .38s cubic-bezier(.2,.8,.2,1) both}
.fk-um-panel.is-open .fk-um-list > *:nth-child(1){animation-delay:.05s}
.fk-um-panel.is-open .fk-um-list > *:nth-child(2){animation-delay:.09s}
.fk-um-panel.is-open .fk-um-list > *:nth-child(3){animation-delay:.13s}
.fk-um-panel.is-open .fk-um-list > *:nth-child(4){animation-delay:.16s}
.fk-um-panel.is-open .fk-um-list > *:nth-child(5){animation-delay:.19s}
@keyframes fkUmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- edit-profile modal must sit above the fixed header ---------- */
#fk-edit-modal{z-index:10100!important}

/* ---------- mobile: sheet-like panel ---------- */
@media(max-width:640px){
    .fk-um-panel{
        left:10px!important;right:10px;width:auto;max-width:none;
        max-height:calc(100dvh - var(--fk-app-header-height,62px) - var(--fk-mobile-nav-height,76px) - 24px);
        border-radius:24px;
    }
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
    .fk-um-panel,.fk-um-panel.is-open,.fk-um-acc-body,.fk-um-acc-inner,.fk-um-ico-wrap,.fk-um-go,.fk-um-chev{transition:opacity .01s linear!important;transform:none!important}
    .fk-um-panel.is-open .fk-um-head,.fk-um-panel.is-open .fk-um-list > *,.fk-um-new-spin{animation:none!important}
}

/* ---------- toast ---------- */
.fk-um-toast{
    position:fixed;z-index:10200;left:50%;bottom:calc(var(--fk-mobile-nav-height,0px) + 28px);
    transform:translate(-50%,16px);opacity:0;pointer-events:none;
    max-width:calc(100vw - 32px);padding:11px 20px;border-radius:14px;direction:rtl;
    font-size:13px;font-weight:700;color:#fff;font-family:inherit;
    background:linear-gradient(135deg,rgba(124,58,237,.96),rgba(192,38,211,.96));
    box-shadow:0 18px 40px -12px rgba(124,58,237,.7);
    transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.fk-um-toast.is-in{opacity:1;transform:translate(-50%,0)}