/* ====================================================================
   AMIR TEAM — آمار زنده‌ی سایدبار
   مینیمال، شیشه‌ای، سه‌بعدی (perspective + tilt) و متحرک
   ==================================================================== */

.aat-lsx {
	--ls-glass: rgba(255, 255, 255, .035);
	--ls-line: rgba(255, 255, 255, .08);
	--ls-text: #eef1f8;
	--ls-muted: rgba(226, 232, 240, .62);
	position: relative; display: flex; flex-direction: column; gap: 12px;
	perspective: 900px;
	color: var(--ls-text);
}

.lsx-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; font-size: 11px; color: var(--ls-muted); }
.lsx-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12px; color: var(--ls-text); }
.lsx-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.lsx-live i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #34d399; animation: lsxPing 2s ease-out infinite; }
@keyframes lsxPing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- کارت شیشه‌ای ---------- */
.lsx-card {
	--acc: #34d399;
	position: relative; padding: 14px; border-radius: 20px; overflow: hidden;
	background: linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
	border: 1px solid var(--ls-line);
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
	transform-style: preserve-3d;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .25s ease-out, border-color .25s, opacity .6s ease, translate .6s cubic-bezier(.2, .8, .2, 1);
	opacity: 0; translate: 0 14px;
}
.lsx-card[hidden] { display: none; }
.lsx-card.is-in { opacity: 1; translate: 0 0; }
.lsx-card:hover { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
/* هایلایت نوری که با ماوس حرکت می‌کند */
.lsx-card::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
	background: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 0%), color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%);
}
.lsx-card:hover::before { opacity: 1; }
.lsx-card > * { position: relative; }

.lsx-lbl { font-size: 11.5px; color: var(--ls-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.lsx-lbl em { font-style: normal; font-size: 10.5px; padding: 1px 8px; border-radius: 999px; color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.lsx-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lsx-hint { font-size: 10.5px; color: var(--ls-muted); }

/* ---------- سلامت: گوی سه‌بعدی ---------- */
.lsx-health { --acc: #34d399; text-align: center; padding-block: 18px 14px; }
.lsx-orb {
	position: relative; width: 132px; height: 132px; margin: 0 auto 10px;
	transform-style: preserve-3d; animation: lsxFloat 7s ease-in-out infinite;
}
@keyframes lsxFloat { 0%, 100% { transform: rotateX(8deg) rotateY(-10deg) translateY(0); } 50% { transform: rotateX(-6deg) rotateY(12deg) translateY(-4px); } }
.lsx-core {
	position: absolute; inset: 22px; border-radius: 50%; display: grid; place-content: center; text-align: center; transform: translateZ(18px);
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .28), transparent 42%),
		radial-gradient(circle at 50% 60%, rgba(52, 211, 153, .35), rgba(6, 30, 26, .92) 72%);
	box-shadow: inset 0 -8px 18px rgba(0, 0, 0, .5), 0 12px 30px -8px rgba(52, 211, 153, .5);
}
.lsx-core b { font-size: 30px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.lsx-core small { font-size: 9.5px; color: var(--ls-muted); margin-top: 3px; }
.lsx-ring { position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(110, 231, 183, .35); }
.lsx-ring-a { transform: rotateX(72deg); animation: lsxSpinA 9s linear infinite; }
.lsx-ring-b { inset: 12px; border-color: rgba(34, 211, 238, .3); transform: rotateY(72deg) rotateZ(20deg); animation: lsxSpinB 12s linear infinite; }
@keyframes lsxSpinA { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes lsxSpinB { to { transform: rotateY(72deg) rotateZ(380deg); } }
.lsx-arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) translateZ(6px); }
.lsx-arc circle { fill: none; stroke-width: 5; }
.lsx-arc-track { stroke: rgba(255, 255, 255, .08); }
.lsx-arc-val { stroke: url(#lsxArcGrad); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px rgba(52, 211, 153, .6)); }

/* ---------- دو کاشی کوچک ---------- */
.lsx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lsx-duo:not(:has(.lsx-card:not([hidden]))) { display: none; }
.lsx-duo:has(.lsx-card[hidden]) { grid-template-columns: 1fr; }
.lsx-mini { padding: 13px 13px 14px; display: flex; flex-direction: column; gap: 6px; }
.lsx-response { --acc: #38bdf8; }
.lsx-volume { --acc: #a78bfa; }
.lsx-num { display: flex; align-items: baseline; gap: 5px; }
.lsx-num b { font-size: 26px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; transform: translateZ(14px); }
.lsx-num small { font-size: 11px; color: var(--ls-muted); }
.lsx-meter { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 4px; }
.lsx-meter u { display: block; height: 100%; width: 0; border-radius: 4px; text-decoration: none; background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #fff)); box-shadow: 0 0 12px var(--acc); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }

/* ---------- رضایت: نمودار ناحیه‌ای ---------- */
.lsx-sat { --acc: #fbbf24; }
.lsx-pct { font-size: 12px; color: var(--ls-muted); }
.lsx-pct b { font-size: 22px; color: var(--ls-text); font-weight: 900; font-variant-numeric: tabular-nums; }
.lsx-chart { position: relative; height: 84px; transform: translateZ(10px); }
.lsx-chart svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lsx-line { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--acc) 55%, transparent)); }
.lsx-chart.is-drawn .lsx-line { animation: lsxDraw 1.5s .1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes lsxDraw { to { stroke-dashoffset: 0; } }
.lsx-area { opacity: 0; transition: opacity 1s .8s; }
.lsx-chart.is-drawn .lsx-area { opacity: 1; }
.lsx-dot { fill: #fff; stroke: var(--acc); stroke-width: 2; opacity: 0; transition: opacity .3s 1.3s; }
.lsx-chart.is-drawn .lsx-dot { opacity: 1; }
.lsx-dot-last { animation: lsxPulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lsxPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.lsx-tip {
	position: absolute; top: -6px; pointer-events: none; padding: 3px 9px; border-radius: 8px; font-size: 10.5px; white-space: nowrap;
	background: rgba(8, 10, 18, .94); border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); transform: translate(-50%, -100%); opacity: 0; transition: opacity .15s;
}
.lsx-tip.is-on { opacity: 1; }
.lsx-days { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9.5px; color: var(--ls-muted); }

/* ---------- ساعات پرتردد: میله‌های اکسترود ---------- */
.lsx-traffic { --acc: #22d3ee; }
.lsx-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 2px; height: 70px; padding-inline: 2px; transform: rotateX(14deg) translateZ(10px); transform-origin: bottom; }
.lsx-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.lsx-bar i {
	position: relative; display: block; width: 100%; height: 0; min-height: 3px; border-radius: 3px 3px 1px 1px;
	background: linear-gradient(180deg, #67e8f9, #4f46e5);
	transition: height .9s cubic-bezier(.2, .8, .2, 1);
	transition-delay: calc(var(--i, 0) * 25ms);
}
.lsx-bar i::before { content: ''; position: absolute; left: 0; right: -2px; top: -3px; height: 3px; background: #a5f3fc; transform: skewX(-45deg); transform-origin: bottom left; border-radius: 2px 2px 0 0; opacity: .85; }
.lsx-bar i::after { content: ''; position: absolute; top: -2px; bottom: 0; right: -2px; width: 2px; background: #312e81; transform: skewY(-45deg); transform-origin: top right; opacity: .9; }
.lsx-bar.is-now i { background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 0 14px rgba(251, 191, 36, .7); }
.lsx-bar.is-now i::before { background: #fef3c7; }
.lsx-bar.is-now i::after { background: #b45309; }
.lsx-bar:hover i { filter: brightness(1.25); }
.lsx-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9.5px; color: var(--ls-muted); }

/* ---------- فعالیت شخصی ---------- */
.lsx-me { --acc: #f472b6; display: flex; align-items: center; gap: 14px; }
.lsx-me-ring { position: relative; flex: 0 0 62px; width: 62px; height: 62px; transform: translateZ(12px); }
.lsx-me-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lsx-me-ring circle { fill: none; stroke-width: 5; }
.lsx-me-val { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset 1.3s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acc) 70%, transparent)); }
.lsx-me-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.lsx-me-ring.is-empty { display: none; }
.lsx-me-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lsx-me-grid { display: flex; gap: 18px; }
.lsx-me-grid div { display: flex; flex-direction: column; }
.lsx-me-grid b { font-size: 20px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lsx-me-grid small, .lsx-credit { font-size: 10.5px; color: var(--ls-muted); }

.lsx-empty { padding: 14px; text-align: center; font-size: 11.5px; line-height: 1.9; color: var(--ls-muted); border: 1px dashed var(--ls-line); border-radius: 16px; }
.lsx-empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.lsx-orb, .lsx-ring, .lsx-live i::after, .lsx-dot-last { animation: none; }
	.lsx-card { transition: opacity .2s; translate: 0 0; }
}

/* ---------- حالت «در حال جمع‌آوری داده» ---------- */
.lsx-card.is-pending { min-height: 92px; }
.lsx-card.is-pending > *:not(.lsx-pending):not(.lsx-row):not(.lsx-lbl) { opacity: .1; filter: blur(3px); pointer-events: none; }
.lsx-card.is-pending .lsx-pct, .lsx-card.is-pending .lsx-hint { opacity: 0; }
.lsx-pending {
	position: absolute !important; right: 14px; left: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; text-align: center; z-index: 2;
}
.lsx-health.is-pending .lsx-pending, .lsx-mini.is-pending .lsx-pending { bottom: 12px; }
.lsx-pending-t { font-size: 11.5px; font-weight: 700; color: var(--ls-text); }
.lsx-pending-n { font-size: 10.5px; color: var(--ls-muted); }
.lsx-pending-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.lsx-pending-bar u { display: block; height: 100%; width: 0; border-radius: 4px; text-decoration: none; transition: width 1s cubic-bezier(.2, .8, .2, 1);
	background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #fff)); box-shadow: 0 0 10px var(--acc);
	background-size: 200% 100%; animation: lsxStripe 2.2s linear infinite; }
@keyframes lsxStripe { to { background-position: -200% 0; } }
.lsx-health.is-pending { min-height: 180px; }
.lsx-sat.is-pending, .lsx-traffic.is-pending { min-height: 130px; }
.lsx-health.is-pending .lsx-pending { bottom: 40px; }
.lsx-health.is-pending .lsx-lbl { position: absolute; bottom: 12px; left: 0; right: 0; justify-content: center; }