.pla{
	--pla-accent:#009B5D;
	--pla-text:#23262f;
	--pla-muted:#767b86;
	--pla-border:#d9dce1;
	--pla-bg:transparent;
	--pla-h:44px;
	--pla-radius:12px;
	--pla-menu-w:280px;
	--pla-menu-bg:#fff;
	--pla-hover:#f3f5f7;
	--pla-danger:#e5384f;
	position:relative;
	display:inline-flex;
	vertical-align:middle;
	font-family:inherit;
	line-height:1.5;
}
.pla,.pla *,.pla *::before,.pla *::after{box-sizing:border-box}

/* ---------- دکمه‌ها ---------- */
.pla .pla-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	height:var(--pla-h);margin:0;
	border:1px solid var(--pla-border);border-radius:var(--pla-radius);
	background:var(--pla-bg);color:var(--pla-text);
	text-decoration:none;cursor:pointer;box-shadow:none;
	transition:border-color .15s,color .15s,background-color .15s;
}
.pla .pla-btn:hover,
.pla .pla-btn:focus-visible,
.pla--user.is-open .pla-trigger{border-color:var(--pla-accent);color:var(--pla-accent)}
.pla .pla-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--pla-accent) 30%,transparent);outline-offset:2px}

.pla .pla-login{padding:0 16px;font-size:14px;font-weight:700;white-space:nowrap}
.pla .pla-trigger{min-width:var(--pla-h);padding:0 10px}
.pla .pla-uname{font-size:14px;font-weight:700;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pla .pla-btn-ico{flex:0 0 auto;width:22px;height:22px}
.pla .pla-arrow{width:16px;height:16px;transition:transform .15s}
.pla--user.is-open .pla-arrow{transform:rotate(180deg)}

/* ---------- منوی کشویی ----------
   باز/بسته شدن کاملاً توسط جاوااسکریپت (کلاس is-open) مدیریت می‌شود تا به :hover و لایه‌های صفحه وابسته نباشد.
   .pla-drop بدون هیچ فاصله‌ای به آیکن چسبیده و فاصله بصری را با padding می‌سازد. */
.pla-drop{
	position:absolute;top:100%;z-index:99999;
	width:var(--pla-menu-w);max-width:92vw;padding-top:10px;
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .15s ease,visibility 0s linear .15s;
}
.pla-menu{
	padding:8px;background:var(--pla-menu-bg);border:1px solid #e6e8ec;border-radius:16px;
	box-shadow:0 12px 32px rgba(15,23,42,.14);
	transform:translateY(6px);transition:transform .15s ease;
}

.pla--align-end .pla-drop{inset-inline-end:0}
.pla--align-start .pla-drop{inset-inline-start:0}
.pla--align-end.is-flip .pla-drop{inset-inline-end:auto;inset-inline-start:0}
.pla--align-start.is-flip .pla-drop{inset-inline-start:auto;inset-inline-end:0}

.pla--user.is-open .pla-drop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.pla--user.is-open .pla-menu{transform:none}

/* ---------- سربرگ (نام و شماره) ---------- */
.pla .pla-head{
	display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;
	color:var(--pla-text);text-decoration:none;transition:background-color .15s;
}
.pla .pla-head:hover{background:var(--pla-hover);color:var(--pla-text)}
.pla-avatar{
	flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
	background:color-mix(in srgb,var(--pla-accent) 12%,#fff);color:var(--pla-accent);
}
.pla-avatar-ico{width:24px;height:24px}
.pla-id{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pla-name{max-width:100%;font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pla-phone{font-size:13px;color:var(--pla-muted);unicode-bidi:plaintext;font-variant-numeric:tabular-nums}

/* ---------- لیست گزینه‌ها ---------- */
.pla .pla-list{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid #eceef1}
.pla .pla-list li{margin:0;padding:0}
.pla .pla-list a{
	display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
	font-size:14px;font-weight:600;color:var(--pla-text);text-decoration:none;
	transition:background-color .15s,color .15s;
}
.pla .pla-list a .pla-ico{flex:0 0 auto;width:20px;height:20px;color:var(--pla-muted);transition:color .15s}
.pla .pla-list a:hover,
.pla .pla-list a:focus-visible{background:var(--pla-hover);color:var(--pla-text)}
.pla .pla-list a:hover .pla-ico{color:var(--pla-accent)}

.pla .pla-list .pla-logout{margin-top:6px;padding-top:6px;border-top:1px solid #eceef1}
.pla .pla-list .pla-logout a,
.pla .pla-list .pla-logout a .pla-ico{color:var(--pla-danger)}
.pla .pla-list .pla-logout a:hover{background:color-mix(in srgb,var(--pla-danger) 8%,#fff)}

@media (max-width:480px){
	.pla .pla-login{padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
	.pla-drop,.pla-menu,.pla .pla-btn,.pla .pla-arrow{transition:none}
}