.metrics-dashboard:where(.astro-wwdkrhcz){padding:40px 0;overflow:hidden}.dashboard-container:where(.astro-wwdkrhcz){position:relative;width:100%;height:480px;display:flex;align-items:center;justify-content:center}.center-metric:where(.astro-wwdkrhcz){position:relative;z-index:10;width:240px;height:240px;display:flex;align-items:center;justify-content:center}.center-glow:where(.astro-wwdkrhcz){position:absolute;inset:0;background:radial-gradient(circle,var(--accent-primary) 0%,transparent 70%);opacity:.15;filter:blur(40px);animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.15}50%{transform:scale(1.1);opacity:.25}}.center-content:where(.astro-wwdkrhcz){position:relative;width:200px;height:200px;background:var(--bg-card);border:2px solid var(--accent-border);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 40px #635bff33;animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.center-icon:where(.astro-wwdkrhcz){width:40px;height:40px;color:var(--accent-primary)}.center-icon:where(.astro-wwdkrhcz) svg{width:100%;height:100%}.center-value:where(.astro-wwdkrhcz){display:flex;align-items:baseline;gap:4px}.center-value:where(.astro-wwdkrhcz) .number:where(.astro-wwdkrhcz){font-size:36px;font-weight:800;background:linear-gradient(135deg,var(--accent-primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.center-value:where(.astro-wwdkrhcz) .unit:where(.astro-wwdkrhcz){font-size:14px;font-weight:600;color:var(--text-muted)}.center-label:where(.astro-wwdkrhcz){font-size:13px;font-weight:600;color:var(--text-primary);text-align:center}.center-description:where(.astro-wwdkrhcz){font-size:11px;color:var(--text-muted);text-align:center;max-width:160px}.center-compare:where(.astro-wwdkrhcz){display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}.center-compare:where(.astro-wwdkrhcz).advantage{background:linear-gradient(135deg,#635bff,#8b5cf6);color:#fff}.center-compare:where(.astro-wwdkrhcz).neutral{background:var(--bg-tertiary);color:var(--text-muted)}.surrounding-metric:where(.astro-wwdkrhcz){position:absolute;transform:translate(var(--x),var(--y));animation:fadeInUp .6s ease-out var(--delay) both}@keyframes fadeInUp{0%{opacity:0;transform:translate(var(--x),calc(var(--y) + 20px))}to{opacity:1;transform:translate(var(--x),var(--y))}}.metric-card-mini:where(.astro-wwdkrhcz){width:140px;padding:16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-md);transition:all .3s ease;cursor:pointer}.metric-card-mini:where(.astro-wwdkrhcz):hover{transform:translateY(-4px) scale(1.05);border-color:var(--tag-border);box-shadow:0 8px 24px #0000001f}.mini-header:where(.astro-wwdkrhcz){margin-bottom:8px}.mini-tag:where(.astro-wwdkrhcz){display:inline-block;padding:2px 8px;background:var(--tag-bg);border:1px solid var(--tag-border);border-radius:12px;font-size:10px;font-weight:600;color:var(--tag-text)}.mini-value:where(.astro-wwdkrhcz){display:flex;align-items:baseline;gap:2px;margin-bottom:4px}.mini-number:where(.astro-wwdkrhcz){font-size:24px;font-weight:700;color:var(--text-primary)}.mini-unit:where(.astro-wwdkrhcz){font-size:12px;color:var(--text-muted)}.mini-label:where(.astro-wwdkrhcz){font-size:12px;color:var(--text-subtle);margin-bottom:6px}.mini-compare:where(.astro-wwdkrhcz){font-size:11px;font-weight:600;padding:2px 6px;border-radius:8px;display:inline-block}.mini-compare:where(.astro-wwdkrhcz).advantage{background:linear-gradient(135deg,#635bff,#8b5cf6);color:#fff}.mini-compare:where(.astro-wwdkrhcz).neutral{background:var(--bg-tertiary);color:var(--text-muted)}.connector-line:where(.astro-wwdkrhcz){position:absolute;top:50%;left:50%;width:60px;height:1px;background:linear-gradient(90deg,var(--accent-primary),transparent);transform-origin:left center;transform:rotate(var(--angle)) translate(70px);opacity:.3;pointer-events:none}.dashboard-legend:where(.astro-wwdkrhcz){display:flex;justify-content:center;gap:24px;margin-top:40px;flex-wrap:wrap}.legend-item:where(.astro-wwdkrhcz){display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}.legend-dot:where(.astro-wwdkrhcz){width:10px;height:10px;border-radius:50%}.legend-dot:where(.astro-wwdkrhcz).default{background:var(--accent-primary)}.legend-dot:where(.astro-wwdkrhcz).secondary{background:#635bff}.legend-dot:where(.astro-wwdkrhcz).tertiary{background:#10b981}.legend-dot:where(.astro-wwdkrhcz).quaternary{background:#f59e0b}.legend-dot:where(.astro-wwdkrhcz).quinary{background:#8b5cf6}@media(max-width:768px){.dashboard-container:where(.astro-wwdkrhcz){height:auto;flex-direction:column;gap:24px}.center-metric:where(.astro-wwdkrhcz){width:200px;height:200px}.center-content:where(.astro-wwdkrhcz){width:160px;height:160px}.center-value:where(.astro-wwdkrhcz) .number:where(.astro-wwdkrhcz){font-size:28px}.surrounding-metric:where(.astro-wwdkrhcz){position:relative;transform:none!important;animation:fadeIn .6s ease-out var(--delay) both}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.connector-line:where(.astro-wwdkrhcz){display:none}.dashboard-legend:where(.astro-wwdkrhcz){margin-top:24px}}.chart-container:where(.astro-i7ud6ezj){background:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;padding:32px;transition:all .3s ease}.chart-container:where(.astro-i7ud6ezj):hover{border-color:var(--accent-border);box-shadow:var(--shadow-lg)}.chart-header:where(.astro-i7ud6ezj){margin-bottom:28px;text-align:center}.chart-title:where(.astro-i7ud6ezj){font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.chart-subtitle:where(.astro-i7ud6ezj){font-size:13px;color:var(--text-subtle)}.performance-chart:where(.astro-i7ud6ezj){display:flex;flex-direction:column;gap:20px}.chart-row:where(.astro-i7ud6ezj){display:grid;grid-template-columns:60px 1fr 70px;align-items:center;gap:16px}.qos-label:where(.astro-i7ud6ezj){font-size:13px;font-weight:600;color:var(--text-subtle);text-align:right;padding-right:8px;border-right:2px solid var(--border-color)}.chart-bars:where(.astro-i7ud6ezj){display:flex;flex-direction:column;gap:8px}.bar-wrapper:where(.astro-i7ud6ezj){display:flex;flex-direction:column;gap:4px}.bar-track:where(.astro-i7ud6ezj){height:20px;background:var(--bg-tertiary);border-radius:6px;overflow:hidden;position:relative}.bar-fill:where(.astro-i7ud6ezj){height:100%;width:0;border-radius:6px;position:relative;transition:width 1.2s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:flex-end;padding-right:5px}.bar-fill:where(.astro-i7ud6ezj).smart-mqtt{background:linear-gradient(90deg,#635bff,#8b5cf6);box-shadow:0 2px 8px #635bff4d}.bar-fill:where(.astro-i7ud6ezj).competitor{background:linear-gradient(90deg,#9ca3af,#d1d5db)}.bar-fill:where(.astro-i7ud6ezj) .bar-value:where(.astro-i7ud6ezj){font-size:12px;font-weight:600;color:#fff;white-space:nowrap;opacity:0;transition:opacity .3s ease .8s}.bar-fill:where(.astro-i7ud6ezj).animated .bar-value:where(.astro-i7ud6ezj){opacity:1}.bar-brand:where(.astro-i7ud6ezj){font-size:11px;color:var(--text-subtle);margin-left:4px}.advantage-badge:where(.astro-i7ud6ezj){display:flex;align-items:center;justify-content:center}.advantage-value:where(.astro-i7ud6ezj){display:inline-flex;align-items:center;padding:4px 10px;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:20px;font-size:12px;font-weight:700;color:var(--accent-primary)}.advantage-badge:where(.astro-i7ud6ezj).advantage .advantage-value:where(.astro-i7ud6ezj){background:linear-gradient(135deg,#635bff,#8b5cf6);color:#fff;border:none}.advantage-badge:where(.astro-i7ud6ezj).neutral .advantage-value:where(.astro-i7ud6ezj){background:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-subtle);font-weight:500}@media(max-width:640px){.chart-container:where(.astro-i7ud6ezj){padding:24px}.chart-row:where(.astro-i7ud6ezj){grid-template-columns:45px 1fr 55px;gap:10px}.qos-label:where(.astro-i7ud6ezj){font-size:11px}.bar-fill:where(.astro-i7ud6ezj) .bar-value:where(.astro-i7ud6ezj){font-size:10px;padding-right:6px}.advantage-value:where(.astro-i7ud6ezj){font-size:10px;padding:3px 6px}}
