/* ==========================================================================
   Gaming Hub - Main Styles
   ========================================================================== */

:root {
	--pika-yellow: #ffcb05;
	--pika-yellow-light: #ffe566;
	--pika-yellow-dark: #c7a008;
	--pika-red: #e3350d;
	--pika-brown: #2a2118;
	--pika-blue: #3b4cca;
	--color-bg: #0f0c06;
	--color-bg-secondary: #1a1508;
	--color-bg-card: rgba(15, 12, 6, 0.78);
	--color-bg-card-hover: rgba(26, 22, 12, 0.88);
	--color-primary: var(--pika-yellow);
	--color-primary-dark: var(--pika-yellow-dark);
	--color-secondary: var(--pika-red);
	--color-accent: var(--pika-blue);
	--color-text: #fff8e7;
	--color-text-muted: #b8a878;
	--color-border: rgba(255, 203, 5, 0.18);
	--font-display: 'Orbitron', sans-serif;
	--font-body: 'Inter', sans-serif;
	--radius: 8px;
	--radius-lg: 16px;
	--shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
	--shadow-glow: 0 0 24px rgba(255, 203, 5, 0.22);
	--transition: 0.3s ease;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	position: relative;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(255, 203, 5, 0.15) 0%, transparent 35%),
		radial-gradient(circle at 85% 80%, rgba(227, 53, 13, 0.1) 0%, transparent 30%),
		radial-gradient(circle at 50% 50%, rgba(59, 76, 202, 0.08) 0%, transparent 40%);
}

.site-header,
.site-main,
.site-footer {
	position: relative;
	z-index: 2;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-primary-dark);
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(15, 12, 6, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70px;
	overflow: hidden;
	max-height: 70px;
	opacity: 1;
	transition:
		max-height 0.28s ease,
		opacity 0.2s ease,
		border-color 0.28s ease;
}

.site-header .header-inner.is-scroll-hidden {
	max-height: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

.site-header.is-chrome-hidden {
	border-bottom-color: transparent;
	box-shadow: none;
}

.site-header.is-chrome-hidden ~ .site-main .ecoflow-hub-nav,
.site-header.is-chrome-hidden ~ .site-main .tesla-hub-nav {
	top: 0;
}

.site-title,
.footer-logo {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-title:hover,
.footer-logo:hover {
	color: var(--pika-yellow-light);
}

.logo-icon {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	flex-shrink: 0;
	filter: drop-shadow(0 0 8px rgba(255, 203, 5, 0.5));
}

/* Mobile EcoFlow / Tesla switcher — desktop hidden */
.hub-switcher {
	display: none;
}

.hub-panel[hidden] {
	display: none !important;
}

.hub-spa-panels {
	min-width: 0;
}

.nav-menu {
	display: flex;
	list-style: none;
	gap: 32px;
}

.nav-menu a {
	color: var(--color-text-muted);
	font-weight: 500;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.nav-menu a:hover,
.nav-menu .current-menu-item a {
	color: var(--pika-yellow);
	text-shadow: 0 0 12px rgba(255, 203, 5, 0.35);
}

.header-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 12px;
	flex-shrink: 0;
}

.main-navigation {
	margin-left: auto;
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.lang-switch a {
	color: var(--color-text-muted);
	padding: 4px 6px;
	border-radius: 4px;
	text-decoration: none;
}

.lang-switch a:hover,
.lang-switch a.is-active {
	color: var(--pika-yellow);
	text-shadow: 0 0 12px rgba(255, 203, 5, 0.35);
}

.lang-switch a.is-active {
	border: 1px solid rgba(255, 203, 5, 0.45);
}

.lang-switch-sep {
	color: var(--color-text-muted);
	opacity: 0.5;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	transition: var(--transition);
}

/* Hero */
.hero {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 12, 6, 0.35) 0%, rgba(15, 12, 6, 0.82) 100%),
		radial-gradient(ellipse at 50% 100%, rgba(255, 203, 5, 0.28) 0%, transparent 55%),
		radial-gradient(ellipse at 20% 30%, rgba(59, 76, 202, 0.12) 0%, transparent 45%),
		linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
}

.hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(255, 203, 5, 0.015) 2px,
			rgba(255, 203, 5, 0.015) 4px
		),
		url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFCB05' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.9;
}

.hero-content {
	position: relative;
	text-align: center;
	padding: 80px 24px;
}

.hero-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 16px;
	background: linear-gradient(135deg, #fff8e7 0%, var(--pika-yellow) 45%, var(--pika-yellow-light) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 20px rgba(255, 203, 5, 0.25));
}

.hero-subtitle {
	font-size: 1.2rem;
	color: var(--color-text-muted);
	margin-bottom: 32px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Landing page */
body.home .site-header {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

body.home .site-header.is-scrolled {
	background: rgba(15, 12, 6, 0.92);
	border-bottom-color: var(--color-border);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.lp-hero {
	position: relative;
	min-height: calc(100vh - 0px);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 120px 0 80px;
}

.lp-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 70% 20%, rgba(255, 203, 5, 0.22) 0%, transparent 42%),
		radial-gradient(ellipse at 10% 80%, rgba(0, 200, 83, 0.12) 0%, transparent 40%),
		radial-gradient(ellipse at 90% 90%, rgba(255, 107, 53, 0.12) 0%, transparent 38%),
		linear-gradient(180deg, rgba(15, 12, 6, 0.2) 0%, var(--color-bg) 100%);
}

.lp-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(255, 203, 5, 0.02) 2px,
			rgba(255, 203, 5, 0.02) 4px
		);
	opacity: 0.7;
}

.lp-hero-inner {
	position: relative;
	text-align: center;
	max-width: 880px;
}

.lp-hero-badge {
	display: inline-block;
	margin-bottom: 20px;
	padding: 6px 16px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pika-yellow);
	border: 1px solid rgba(255, 203, 5, 0.35);
	border-radius: 999px;
	background: rgba(255, 203, 5, 0.08);
}

.lp-hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 5.4vw, 3.6rem);
	font-weight: 900;
	line-height: 1.25;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #fff8e7 0%, var(--pika-yellow) 55%, var(--pika-yellow-light) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 20px rgba(255, 203, 5, 0.25));
}

.lp-hero-lead {
	font-size: 1.12rem;
	line-height: 1.8;
	color: var(--color-text-muted);
	max-width: 640px;
	margin: 0 auto 32px;
}

.lp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 40px;
}

.lp-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	max-width: 640px;
	margin: 0 auto 36px;
}

.lp-hero-stats div {
	padding: 16px 12px;
	background: rgba(15, 12, 6, 0.55);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.lp-hero-stats dt {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-bottom: 4px;
}

.lp-hero-stats dd {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--pika-yellow);
}

.lp-hero-scroll {
	display: inline-block;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.lp-hero-scroll::after {
	content: '';
	display: block;
	width: 1px;
	height: 28px;
	margin: 8px auto 0;
	background: linear-gradient(180deg, var(--pika-yellow), transparent);
}

.lp-kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--pika-yellow);
	margin-bottom: 10px;
}

.lp-features {
	padding-top: 64px;
}

.lp-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.lp-feature-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 22px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: inherit;
	min-height: 240px;
	transition: var(--transition);
}

.lp-feature-card:hover {
	transform: translateY(-4px);
	color: inherit;
	border-color: rgba(255, 203, 5, 0.45);
	box-shadow: var(--shadow-glow);
}

.lp-feature-icon {
	font-size: 1.8rem;
	margin-bottom: 14px;
}

.lp-feature-card h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	margin-bottom: 10px;
}

.lp-feature-card p {
	font-size: 0.88rem;
	color: var(--color-text-muted);
	line-height: 1.6;
	flex: 1;
}

.lp-feature-link {
	margin-top: 16px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--pika-yellow);
}

.lp-feature-ecoflow:hover {
	border-color: rgba(0, 200, 83, 0.45);
	box-shadow: 0 0 24px rgba(0, 200, 83, 0.16);
}

.lp-secondary {
	padding-top: 56px;
	padding-bottom: 56px;
}

.lp-final-cta {
	padding: 72px 0 88px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 203, 5, 0.14) 0%, transparent 55%);
	border-top: 1px solid var(--color-border);
}

.lp-final-cta-inner {
	text-align: center;
	max-width: 680px;
}

.lp-final-cta h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin-bottom: 12px;
}

.lp-final-cta p {
	color: var(--color-text-muted);
	margin-bottom: 28px;
}

.lp-final-cta .lp-hero-actions {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.lp-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Buttons */
.btn {
	display: inline-block;
	padding: 14px 32px;
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: var(--radius);
	border: none;
	cursor: pointer;
	transition: var(--transition);
}

.btn-primary {
	background: linear-gradient(135deg, var(--pika-yellow) 0%, var(--pika-yellow-dark) 100%);
	color: var(--pika-brown);
	box-shadow: var(--shadow-glow);
	border: 1px solid rgba(255, 230, 102, 0.4);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 32px rgba(255, 203, 5, 0.45);
	color: var(--pika-brown);
}

/* Sections */
.section {
	padding: 80px 0;
}

.section-header {
	text-align: center;
	margin-bottom: 48px;
}

.section-title {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--pika-yellow-light);
	text-shadow: 0 0 16px rgba(255, 203, 5, 0.15);
}

.section-desc {
	color: var(--color-text-muted);
	font-size: 1.05rem;
}

/* Game Grid */
.game-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
}

.game-card,
.news-card,
.cta-card,
.ecoflow-dashboard,
.pgo-home-card {
	backdrop-filter: blur(8px);
}

.game-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: var(--transition);
}

.game-card:hover {
	transform: translateY(-4px);
	border-color: var(--pika-yellow);
	box-shadow: 0 0 24px rgba(255, 203, 5, 0.18);
}

.game-card-link {
	display: block;
	color: inherit;
}

.game-card-link:hover {
	color: inherit;
}

.game-card-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.game-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}

.game-card:hover .game-card-image img {
	transform: scale(1.05);
}

.placeholder-image {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pika-brown) 0%, var(--color-bg-secondary) 45%, var(--pika-yellow-dark) 100%);
	opacity: 0.55;
}

.game-rating {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(15, 12, 6, 0.85);
	color: var(--pika-yellow);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 4px 10px;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 203, 5, 0.45);
}

.game-card-body {
	padding: 20px;
}

.game-platform {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-secondary);
	margin-bottom: 8px;
}

.game-card-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1.3;
}

.game-card-excerpt {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* News Grid */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.news-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: var(--transition);
}

.news-card:hover {
	border-color: var(--pika-yellow);
	box-shadow: 0 0 18px rgba(255, 203, 5, 0.12);
}

.news-card a {
	display: block;
	color: inherit;
}

.news-card a:hover {
	color: inherit;
}

.news-card-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.news-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card-body {
	padding: 20px;
}

.news-card-body time {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.news-card-body h3 {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	margin: 8px 0;
	line-height: 1.4;
}

.news-card-body p {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* CTA Grid */
.cta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.cta-card {
	display: block;
	padding: 32px;
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	text-align: center;
	transition: var(--transition);
	color: inherit;
}

.cta-card:hover {
	transform: translateY(-4px);
	color: inherit;
}

.cta-reviews:hover { border-color: var(--pika-yellow); box-shadow: 0 0 20px rgba(255, 203, 5, 0.2); }
.cta-guides:hover { border-color: var(--pika-blue); box-shadow: 0 0 20px rgba(59, 76, 202, 0.2); }
.cta-news:hover { border-color: var(--pika-red); box-shadow: 0 0 20px rgba(227, 53, 13, 0.18); }

.cta-icon {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 16px;
}

.cta-card h3 {
	font-family: var(--font-display);
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.cta-card p {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* Posts Grid (archive/index) */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
	padding: 48px 0;
	width: 100%;
	max-width: 100%;
}

.content-area--hub-top .posts-grid {
	padding-top: 28px;
	padding-bottom: 32px;
}

.content-area--hub-top {
	padding-bottom: 8px;
	max-width: 100%;
	overflow-x: clip;
}

.post-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: var(--transition);
	min-width: 0;
	max-width: 100%;
}

.post-card:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.post-card-link {
	display: block;
	color: inherit;
	max-width: 100%;
}

.post-card-link:hover {
	color: inherit;
}

.post-card-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.post-card-image img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.post-card-image--diagram {
	background: #0a100e;
}

.post-card-image--diagram img {
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
}

.post-card-body {
	padding: 20px;
	min-width: 0;
}

.post-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-bottom: 8px;
}

.post-card-meta a,
.post-card-cat {
	color: var(--color-secondary);
	font-size: 0.8rem;
}

.post-card-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 8px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.post-card-excerpt {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Single Post */
.post-hero {
	position: relative;
	max-height: 400px;
	overflow: hidden;
}

.post-hero img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

.post-hero--diagram {
	max-height: none;
	background: #0a100e;
	border-bottom: 1px solid rgba(0, 200, 83, 0.2);
}

.post-hero--diagram img {
	height: auto;
	max-height: min(52vw, 420px);
	object-fit: contain;
	object-position: center top;
}

.post-hero--diagram .post-hero-overlay {
	background: linear-gradient(transparent 0%, rgba(10, 16, 14, 0.55) 45%, rgba(10, 10, 15, 0.96) 100%);
}

.post-hero--diagram-tesla {
	background: #0c0c0e;
	border-bottom-color: rgba(227, 25, 55, 0.28);
}

.post-hero--diagram-tesla .post-hero-overlay {
	background: linear-gradient(transparent 0%, rgba(20, 10, 12, 0.55) 45%, rgba(10, 10, 15, 0.96) 100%);
}

.post-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 30%, rgba(10, 10, 15, 0.95) 100%);
	display: flex;
	align-items: flex-end;
	padding-bottom: 40px;
}

.post-hero-overlay .post-title {
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 900;
	margin: 8px 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.post-hero-overlay .post-meta,
.post-header .post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.post-header {
	padding: 48px 0 24px;
}

.post-header .post-title {
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 900;
	margin: 8px 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.post-content {
	padding: 40px 0 80px;
	max-width: 100%;
	overflow-x: clip;
}

.content-wrapper {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.8;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.content-wrapper h2,
.content-wrapper h3 {
	font-family: var(--font-display);
	margin: 32px 0 16px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.content-wrapper p {
	margin-bottom: 16px;
}

.content-wrapper img,
.content-wrapper iframe,
.content-wrapper video,
.content-wrapper table {
	max-width: 100%;
}

.content-wrapper table {
	display: block;
	overflow-x: auto;
}

.content-wrapper .article-lancers {
	margin: 24px 0 32px;
	padding: 18px 20px;
	border: 1px solid rgba(0, 200, 83, 0.28);
	border-radius: 10px;
	background: rgba(0, 200, 83, 0.06);
}

.content-wrapper .article-lancers table {
	display: table;
	margin-top: 12px;
	font-size: 0.92rem;
	width: 100%;
	border-collapse: collapse;
}

.content-wrapper .article-lancers th,
.content-wrapper .article-lancers td {
	padding: 8px 10px;
	border: 1px solid rgba(244, 241, 234, 0.12);
	vertical-align: top;
}

.content-wrapper .article-lancers th {
	background: rgba(0, 0, 0, 0.22);
	text-align: left;
	white-space: nowrap;
}

.content-wrapper .article-lancers-link {
	margin: 14px 0 0;
	font-weight: 600;
}

.single-post-tesla .content-wrapper .article-lancers {
	border-color: rgba(232, 33, 39, 0.32);
	background: rgba(232, 33, 39, 0.06);
}

.content-wrapper pre.article-code {
	margin: 16px 0 24px;
	padding: 14px 16px;
	border-radius: var(--radius-lg, 12px);
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.82rem;
	line-height: 1.55;
	color: #d8e8dc;
	-webkit-overflow-scrolling: touch;
}

.content-wrapper pre.article-code code {
	background: none;
	padding: 0;
	font-size: inherit;
	white-space: pre;
}

.content-wrapper .article-figure {
	margin: 8px 0 28px;
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	background: var(--color-bg-card, #111);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.content-wrapper .article-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.content-wrapper .article-figure figcaption {
	padding: 10px 14px 12px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--color-text-muted, #999);
}

.content-wrapper .article-figure--diagram {
	background: #0a100e;
	border-color: rgba(0, 200, 83, 0.22);
}

.content-wrapper .article-figure--diagram img {
	width: 100%;
	height: auto;
}

.content-wrapper ul,
.content-wrapper ol {
	margin: 0 0 20px;
	padding-left: 1.35em;
}

.content-wrapper li {
	margin-bottom: 8px;
}

.content-wrapper em {
	font-style: normal;
	font-size: 0.92em;
	color: var(--color-text-muted);
}

.content-wrapper a {
	color: var(--ecoflow-green, #00c853);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single-post-ecoflow .content-wrapper .ecoflow-kit {
	margin-top: 28px;
	padding-top: 8px;
	border-top: none;
}

.post-ecoflow-links {
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	font-size: 0.9rem;
}

.post-ecoflow-links a {
	color: var(--ecoflow-green, #00c853);
}

.game-info-box {
	max-width: 760px;
	margin: 40px auto;
	padding: 24px;
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.game-info-box h3 {
	font-family: var(--font-display);
	margin-bottom: 16px;
}

.game-info-box dl {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 8px 16px;
}

.game-info-box dt {
	color: var(--color-text-muted);
	font-weight: 600;
}

.rating-stars .star {
	color: var(--color-border);
}

.rating-stars .star.filled {
	color: var(--color-primary);
}

/* Archive */
.archive-header {
	padding: 60px 0 20px;
	text-align: center;
	background: var(--color-bg-secondary);
	border-bottom: 1px solid var(--color-border);
}

.archive-title {
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 900;
}

.archive-description {
	color: var(--color-text-muted);
	margin-top: 8px;
}

/* Pagination */
.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 40px 0;
}

.pagination .page-numbers,
.nav-links a,
.nav-links span {
	display: inline-block;
	padding: 8px 16px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	font-size: 0.9rem;
	transition: var(--transition);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.nav-links a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Footer */
.site-footer {
	background: var(--color-bg-secondary);
	border-top: 1px solid var(--color-border);
	padding: 60px 0 24px;
	margin-top: 40px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 32px;
}

.footer-grid--compact {
	grid-template-columns: 1.6fr 1fr;
}

.footer-tagline {
	color: var(--color-text-muted);
	margin-top: 8px;
	font-size: 0.9rem;
}

.footer-widget-title,
.footer-links h4 {
	font-family: var(--font-display);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
	color: var(--color-primary);
}

.footer-lancers-bar {
	margin-bottom: 36px;
}

.footer-lancers-bar .lancers-promo--footer {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid rgba(255, 203, 5, 0.28);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(ellipse at 8% 0%, rgba(255, 203, 5, 0.12), transparent 52%),
		var(--color-bg-card);
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
}

.footer-lancers-bar .lancers-promo-media {
	border-radius: 12px;
}

.footer-lancers-bar .lancers-promo-media img {
	width: 100%;
	height: auto;
}

.footer-lancers-bar .lancers-promo-copy {
	padding: 4px 0;
}

.footer-lancers-bar .lancers-promo-title {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	margin-bottom: 8px;
}

.footer-lancers-bar .lancers-promo-lead {
	margin-bottom: 14px;
	font-size: 0.88rem;
}

.footer-menu {
	list-style: none;
}

.footer-menu li {
	margin-bottom: 8px;
}

.footer-menu a {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.footer-menu a:hover {
	color: var(--color-primary);
}

.footer-bottom {
	text-align: center;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.no-results {
	text-align: center;
	padding: 80px 0;
}

.no-results h2 {
	font-family: var(--font-display);
	margin-bottom: 8px;
}

/* Pokémon GO */
:root {
	--pgo-yellow: #ffcb05;
	--pgo-blue: #3b4cca;
	--pgo-red: #ff0000;
}

.pokemon-go-section {
	background: linear-gradient(180deg, rgba(255, 203, 5, 0.07) 0%, rgba(15, 12, 6, 0.5) 50%, var(--color-bg) 100%);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.pokemon-go-section-top {
	padding-top: 48px;
	border-top: none;
}

.pgo-section-badge,
.pgo-hero-badge {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--pgo-yellow);
	background: rgba(255, 203, 5, 0.1);
	border: 1px solid rgba(255, 203, 5, 0.3);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.pgo-home-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.pgo-home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.pgo-home-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: var(--transition);
}

.pgo-home-card:hover {
	border-color: var(--pgo-yellow);
	box-shadow: 0 0 20px rgba(255, 203, 5, 0.12);
	transform: translateY(-2px);
}

.pgo-home-card a {
	display: block;
	color: inherit;
}

.pgo-home-card a:hover {
	color: inherit;
}

.pgo-card-image,
.pgo-news-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, #1a1a2e 0%, #2a2060 100%);
}

.pgo-card-image img,
.pgo-news-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.pgo-image-photo {
	object-fit: cover;
	transition: transform var(--transition);
}

.pgo-image-artwork {
	object-fit: contain;
	padding: 16px;
	transition: transform var(--transition);
}

.pgo-home-card:hover .pgo-card-image img,
.pgo-news-item:hover .pgo-news-image img {
	transform: scale(1.05);
}

.pgo-card-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	opacity: 0.4;
}

.pgo-home-card-body {
	padding: 16px 20px 20px;
}

.pgo-home-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.pgo-home-card h3 {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 8px;
}

.pgo-home-card p {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.pgo-home-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px;
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--pgo-yellow);
	color: var(--pgo-yellow);
}

.btn-outline:hover {
	background: rgba(255, 203, 5, 0.1);
	color: var(--pgo-yellow);
}

.cta-pokemon-go:hover {
	border-color: var(--pgo-yellow);
	box-shadow: 0 0 20px rgba(255, 203, 5, 0.15);
}

.cta-ecoflow:hover {
	border-color: var(--ecoflow-green);
	box-shadow: 0 0 20px rgba(0, 200, 83, 0.15);
}

/* Tesla Powerwall */
:root {
	--pw-red: #e82127;
	--pw-red-dark: #b91a1f;
	--pw-gray: #8e8e93;
}

.powerwall-home-section {
	background: linear-gradient(180deg, rgba(232, 33, 39, 0.04) 0%, transparent 100%);
	border-top: 1px solid rgba(232, 33, 39, 0.12);
	border-bottom: 1px solid rgba(232, 33, 39, 0.12);
}

.pw-section-badge,
.pw-hero-badge {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--pw-red);
	background: rgba(232, 33, 39, 0.1);
	border: 1px solid rgba(232, 33, 39, 0.28);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.pw-home-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.pw-home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.pw-home-card {
	background: var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.12);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: var(--transition);
}

.pw-home-card:hover {
	border-color: var(--pw-red);
	box-shadow: 0 0 20px rgba(232, 33, 39, 0.12);
	transform: translateY(-2px);
}

.pw-home-card a {
	display: block;
	color: inherit;
}

.pw-home-card a:hover {
	color: inherit;
}

.pw-card-image,
.pw-news-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(232, 33, 39, 0.06);
}

.pw-card-image img,
.pw-news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pw-card-image-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 50% 35%, rgba(232, 33, 39, 0.12) 0%, transparent 55%),
		rgba(15, 12, 6, 0.55);
}

.pw-image-product {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}

.pw-home-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 1.15fr);
	gap: 24px;
	align-items: center;
	margin-bottom: 32px;
}

.pw-home-visual {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

.pw-home-house,
.pw-hero-house {
	width: 100%;
	height: auto;
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.pw-home-model3 {
	aspect-ratio: 16 / 10;
}

.pw-home-card-body {
	padding: 16px 18px 20px;
}

.pw-home-card-meta,
.pw-news-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.pw-home-card h3,
.pw-news-title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 8px;
}

.pw-home-card p,
.pw-news-excerpt {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.pw-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 2px 8px;
	border-radius: 4px;
}

.pw-badge-source {
	color: var(--pw-red);
	background: rgba(232, 33, 39, 0.12);
}

.pw-badge-news {
	color: var(--pika-yellow);
	background: rgba(255, 203, 5, 0.12);
}

.pw-badge-product,
.pw-badge-storage {
	color: #64b5f6;
	background: rgba(100, 181, 246, 0.12);
}

.pw-badge-default {
	color: var(--color-text-muted);
	background: rgba(255, 255, 255, 0.06);
}

.pw-home-empty,
.pw-error {
	text-align: center;
	padding: 32px 16px;
}

.cta-powerwall:hover {
	border-color: var(--pw-red);
	box-shadow: 0 0 20px rgba(232, 33, 39, 0.15);
}

/* Powerwall energy flow */
.pw-flow-section {
	padding-top: 8px;
}

.tesla-flow-section {
	padding-top: 8px;
}

.tesla-flow-note {
	margin: 0 0 12px;
	color: var(--color-text-muted);
	font-size: 0.92rem;
}

.tesla-eff-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 0.85rem;
}

.tesla-eff-badges-inline {
	margin: 0 0 0.85rem;
}

.tesla-eff-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.65rem;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.28);
	font-family: var(--font-display);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: rgba(244, 241, 234, 0.88);
}

.tesla-eff-badge.is-good {
	border-color: rgba(0, 245, 212, 0.4);
	color: #00f5d4;
	background: rgba(0, 245, 212, 0.1);
}

.tesla-eff-badge.is-ok {
	border-color: rgba(255, 203, 5, 0.35);
	color: #ffcb05;
	background: rgba(255, 203, 5, 0.08);
}

.tesla-eff-badge.is-high,
.tesla-eff-badge.is-low {
	border-color: rgba(255, 138, 128, 0.4);
	color: #ff8a80;
	background: rgba(255, 138, 128, 0.08);
}

.tesla-eff-badge.is-regen {
	border-color: rgba(100, 180, 255, 0.4);
	color: #7ec8ff;
	background: rgba(100, 180, 255, 0.1);
}

.tesla-charge-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 16px;
}

.tesla-charge-note,
.tesla-charge-status,
.tesla-charge-auth,
.tesla-charge-key {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.tesla-charge-status.is-error,
.tesla-charge-auth {
	color: #ff8a80;
}

.tesla-charge-buttons {
	display: flex;
	gap: 8px;
}

.tesla-charge-on,
.tesla-charge-off {
	font-family: var(--font-display);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	padding: 10px 16px;
	border-radius: 999px;
	cursor: pointer;
}

.tesla-charge-on {
	border: 1px solid rgba(100, 210, 255, 0.7);
	background: rgba(100, 210, 255, 0.12);
	color: #64d2ff;
}

.tesla-charge-off {
	border: 1px solid rgba(232, 33, 39, 0.7);
	background: rgba(232, 33, 39, 0.12);
	color: #ff8a80;
}

.tesla-charge-on.is-current {
	box-shadow: 0 0 14px rgba(100, 210, 255, 0.28);
}

.tesla-charge-off.is-current,
.tesla-charge-controls.is-charging .tesla-charge-off {
	box-shadow: 0 0 14px rgba(232, 33, 39, 0.32);
}

.tesla-charge-key a {
	color: #64d2ff;
}

.tesla-flow-map {
	position: relative;
	min-height: 0;
	margin-bottom: 8px;
	padding: 28px 24px 20px;
	background:
		linear-gradient(rgba(232, 33, 39, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(232, 33, 39, 0.05) 1px, transparent 1px),
		radial-gradient(ellipse at 18% 0%, rgba(100, 210, 255, 0.16), transparent 48%),
		radial-gradient(ellipse at 86% 100%, rgba(232, 33, 39, 0.12), transparent 46%),
		#08070f;
	background-size: 22px 22px, 22px 22px, auto, auto, auto;
	border: 1px solid rgba(232, 33, 39, 0.35);
	border-radius: var(--radius-lg);
	overflow: visible;
}

.tesla-flow-map.teslogic-map {
	padding: clamp(16px, 2.2vw, 28px) clamp(12px, 2vw, 24px) clamp(14px, 2vw, 22px);
	background:
		radial-gradient(ellipse at 50% 20%, rgba(255, 214, 0, 0.08), transparent 42%),
		radial-gradient(ellipse at 20% 80%, rgba(105, 240, 174, 0.06), transparent 40%),
		#0a0a0c;
	border-color: rgba(255, 255, 255, 0.08);
}

.tesla-flow-canvas {
	z-index: 1;
}

.teslogic-system {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	width: 100%;
	max-width: min(1180px, 100%);
	margin: 0 auto;
}

.teslogic-title {
	margin: 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(0.92rem, 1.4vw, 1.1rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.7);
}

.teslogic-top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.9fr) minmax(0, 1.05fr);
	gap: clamp(12px, 1.8vw, 22px) clamp(14px, 2vw, 28px);
	align-items: stretch;
}

/* Tesla: battery alone on top */
.tesla-flow-map.teslogic-map .teslogic-top {
	grid-template-columns: minmax(240px, 360px);
	max-width: min(420px, 100%);
	margin-inline: auto;
	width: 100%;
	justify-content: center;
}

.teslogic-bottom {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.5vw, 16px);
	align-items: stretch;
}

.teslogic-card {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 12px);
	min-width: 0;
	padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 16px) clamp(10px, 1.2vw, 14px);
	border-radius: clamp(14px, 1.4vw, 18px);
	background: rgba(18, 18, 22, 0.94);
	border: 1.5px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	color: #f4f1ea;
}

.teslogic-card.is-active {
	border-color: #c6ff00;
	box-shadow:
		0 0 0 1px rgba(198, 255, 0, 0.2),
		0 0 18px rgba(198, 255, 0, 0.22),
		0 8px 20px rgba(0, 0, 0, 0.35);
}

.teslogic-card.is-standby {
	opacity: 0.88;
}

.teslogic-card--battery {
	border-color: #ffd600;
	box-shadow:
		0 0 0 1px rgba(255, 214, 0, 0.18),
		0 0 22px rgba(255, 214, 0, 0.2),
		0 10px 24px rgba(0, 0, 0, 0.4);
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 214, 0, 0.12), transparent 55%),
		rgba(16, 16, 18, 0.96);
}

.teslogic-card--battery.is-charging {
	border-color: #69f0ae;
	box-shadow:
		0 0 0 1px rgba(105, 240, 174, 0.22),
		0 0 22px rgba(105, 240, 174, 0.25),
		0 10px 24px rgba(0, 0, 0, 0.4);
}

.teslogic-card--battery.is-discharging {
	border-color: #ffd600;
	box-shadow:
		0 0 0 1px rgba(255, 214, 0, 0.28),
		0 0 22px rgba(255, 214, 0, 0.22),
		0 10px 24px rgba(0, 0, 0, 0.4);
}

.teslogic-card--battery.is-asleep {
	opacity: 0.78;
	filter: saturate(0.35) brightness(0.92);
	border-color: rgba(148, 163, 184, 0.45);
	box-shadow:
		0 0 0 1px rgba(148, 163, 184, 0.12),
		0 8px 18px rgba(0, 0, 0, 0.35);
	background:
		radial-gradient(circle at 50% 0%, rgba(148, 163, 184, 0.08), transparent 55%),
		rgba(12, 14, 18, 0.96);
}

.tesla-flow-map.teslogic-map.is-asleep {
	background:
		radial-gradient(ellipse at 50% 18%, rgba(100, 116, 139, 0.12), transparent 44%),
		#07080b;
	border-color: rgba(148, 163, 184, 0.22);
}

.tesla-flow-map.teslogic-map.is-asleep .teslogic-card {
	opacity: 0.62;
	filter: saturate(0.45);
	border-color: rgba(148, 163, 184, 0.28);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
}

.tesla-flow-map.teslogic-map.is-asleep .teslogic-card.is-active {
	opacity: 0.62;
	border-color: rgba(148, 163, 184, 0.28);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
}

.tesla-flow-map.teslogic-map.is-asleep .teslogic-card--battery {
	opacity: 0.88;
	filter: saturate(0.4) brightness(0.95);
}

.teslogic-sleep-badge {
	display: inline-block;
	margin-left: 0.55em;
	padding: 0.12em 0.55em;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.45);
	background: rgba(30, 41, 59, 0.85);
	color: #cbd5e1;
	font-family: var(--font-body, inherit);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.teslogic-card--battery.is-asleep .teslogic-battery__state {
	color: #94a3b8;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.teslogic-card--motor.is-regen.is-active {
	border-color: #64d2ff;
	box-shadow:
		0 0 0 1px rgba(100, 210, 255, 0.22),
		0 0 18px rgba(100, 210, 255, 0.22),
		0 8px 20px rgba(0, 0, 0, 0.35);
}

.teslogic-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 1.4rem;
}

.teslogic-card__icon {
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	font-size: 0.95rem;
	line-height: 1;
	opacity: 0.9;
}

/* Tesla flow: EcoFlow-sized icons on every card except the battery */
.tesla-flow-map.teslogic-map .teslogic-card:not(.teslogic-card--battery) .teslogic-card__head {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	text-align: center;
}

.tesla-flow-map.teslogic-map .teslogic-card:not(.teslogic-card--battery) .teslogic-card__icon {
	width: clamp(3.2rem, 5.5vw, 4.2rem);
	height: clamp(3.2rem, 5.5vw, 4.2rem);
	font-size: clamp(2.3rem, 4vw, 3.1rem);
	opacity: 1;
}

.tesla-flow-map.teslogic-map .teslogic-card.is-home-ac {
	border-color: rgba(105, 240, 174, 0.45);
}

.tesla-flow-map.teslogic-map .teslogic-card.is-home-ac.is-active {
	border-color: #69f0ae;
	box-shadow:
		0 0 0 1px rgba(105, 240, 174, 0.28),
		0 0 22px rgba(105, 240, 174, 0.35),
		0 0 40px rgba(105, 240, 174, 0.18),
		0 10px 24px rgba(0, 0, 0, 0.4);
}

.tesla-flow-map.teslogic-map .teslogic-card.is-home-ac.is-active .teslogic-card__icon {
	filter: drop-shadow(0 0 10px rgba(105, 240, 174, 0.85)) drop-shadow(0 0 20px rgba(105, 240, 174, 0.45));
	animation: tesla-home-ac-glow 1.6s ease-in-out infinite;
}

@keyframes tesla-home-ac-glow {
	0%,
	100% {
		filter: drop-shadow(0 0 8px rgba(105, 240, 174, 0.65)) drop-shadow(0 0 16px rgba(105, 240, 174, 0.3));
		transform: scale(1);
	}
	50% {
		filter: drop-shadow(0 0 14px rgba(105, 240, 174, 1)) drop-shadow(0 0 28px rgba(105, 240, 174, 0.55));
		transform: scale(1.06);
	}
}

.tesla-flow-map.teslogic-map .teslogic-card.is-away-ac.is-active {
	border-color: #ffd60a;
	box-shadow:
		0 0 0 1px rgba(255, 214, 10, 0.25),
		0 0 18px rgba(255, 214, 10, 0.22),
		0 8px 20px rgba(0, 0, 0, 0.35);
}

.tesla-flow-map.teslogic-map .teslogic-card.is-away-ac.is-active .teslogic-card__icon {
	filter: drop-shadow(0 0 8px rgba(255, 214, 10, 0.55));
}

.tesla-flow-map.teslogic-map .teslogic-system {
	gap: clamp(28px, 4vw, 44px);
}

.teslogic-card__label {
	font-size: clamp(0.82rem, 1.1vw, 0.98rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: rgba(244, 241, 234, 0.92);
}

.teslogic-card__note {
	display: block;
	margin-top: -2px;
	font-size: clamp(0.72rem, 0.95vw, 0.82rem);
	line-height: 1.3;
	color: rgba(244, 241, 234, 0.55);
}

.teslogic-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 14px);
}

.teslogic-metric {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.teslogic-metric__label {
	font-size: clamp(0.68rem, 0.9vw, 0.78rem);
	letter-spacing: 0.02em;
	color: rgba(180, 186, 198, 0.72);
}

.teslogic-metric__value {
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	line-height: 1.1;
}

.tesla-flow-map.teslogic-map .teslogic-metric__value {
	font-size: clamp(0.72rem, 1.05vw, 0.92rem);
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: anywhere;
	min-height: 2.6em;
	display: flex;
	align-items: flex-end;
}

.tesla-flow-map.teslogic-map .teslogic-metric__label {
	min-height: 2.6em;
	line-height: 1.3;
	display: flex;
	align-items: flex-end;
}

.tesla-flow-map.teslogic-map .teslogic-metrics {
	align-items: stretch;
}

.tesla-flow-map.teslogic-map .teslogic-metric {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.tesla-flow-map.teslogic-map .teslogic-metric__bar {
	margin-top: auto;
}

.teslogic-metric__bar {
	display: block;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.teslogic-metric__bar::after {
	content: "";
	display: block;
	height: 100%;
	width: var(--bar, 0%);
	border-radius: inherit;
	background: #c6ff00;
	box-shadow: 0 0 8px rgba(198, 255, 0, 0.45);
}

.teslogic-card.is-standby .teslogic-metric__bar::after {
	background: rgba(255, 255, 255, 0.28);
	box-shadow: none;
}

.teslogic-card__extras {
	display: grid;
	gap: 2px;
	margin-top: 2px;
}

.teslogic-card__extras small {
	font-size: 0.68rem;
	line-height: 1.35;
	color: rgba(244, 241, 234, 0.55);
}

.teslogic-card__extras small.is-accent {
	color: #c6ff00;
}

.teslogic-battery__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.4vw, 16px);
	margin-bottom: 6px;
}

.teslogic-battery__top--stack {
	flex-direction: column;
	gap: 6px;
}

.teslogic-battery__soc {
	font-size: clamp(1.55rem, 2.6vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.teslogic-battery__pack {
	display: block;
	text-align: center;
	font-size: clamp(0.72rem, 0.95vw, 0.85rem);
	font-weight: 600;
	color: rgba(244, 241, 234, 0.72);
	font-variant-numeric: tabular-nums;
}

.teslogic-battery__temp {
	font-size: clamp(0.95rem, 1.3vw, 1.15rem);
	font-weight: 600;
	color: rgba(244, 241, 234, 0.78);
}

.teslogic-battery__name {
	display: block;
	margin-top: 4px;
	text-align: center;
	font-size: clamp(0.78rem, 1vw, 0.92rem);
	font-weight: 700;
	color: rgba(244, 241, 234, 0.7);
}

.teslogic-battery__state {
	display: block;
	text-align: center;
	font-size: clamp(0.7rem, 0.9vw, 0.8rem);
	color: rgba(244, 241, 234, 0.5);
}

.teslogic-pack-unit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.teslogic-pack-cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.teslogic-pack-cell.is-charging {
	border-color: rgba(105, 240, 174, 0.45);
	background: rgba(105, 240, 174, 0.08);
}

.teslogic-pack-cell.is-discharging {
	border-color: rgba(255, 214, 0, 0.4);
}

.teslogic-pack-cell.is-unavailable {
	opacity: 0.55;
}

.teslogic-pack-cell__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.teslogic-pack-cell__label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.62);
}

.teslogic-pack-cell__soc {
	font-size: 0.95rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #f4f1ea;
}

.teslogic-pack-cell__bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.teslogic-pack-cell__fill {
	display: block;
	height: 100%;
	width: calc(var(--battery-level, 0) * 1%);
	border-radius: inherit;
	background: var(--batt-tone, #ffd600);
	transition: width 0.35s ease;
}

.teslogic-pack-cell__cap {
	font-size: 0.68rem;
	color: rgba(244, 241, 234, 0.5);
}

.teslogic-pack-cell .ecoflow-node-eta {
	margin: 0;
	text-align: left;
	font-size: 0.65rem;
}

.teslogic-card--battery .teslogic-pack-unit {
	width: 100%;
}

.teslogic-batt-icon {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

.teslogic-batt-icon__body {
	position: relative;
	width: clamp(40px, 4.2vw, 56px);
	height: clamp(20px, 2.1vw, 28px);
	border: 2px solid #69f0ae;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
}

.teslogic-batt-icon__fill {
	display: block;
	height: 100%;
	width: calc(var(--battery-level, 0) * 1%);
	background: #69f0ae;
}

.teslogic-batt-icon__bolt,
.teslogic-batt-icon__mark {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	font-size: clamp(0.85rem, 1.2vw, 1.15rem);
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
	font-weight: 800;
	pointer-events: none;
}

.teslogic-batt-icon__nub {
	width: clamp(4px, 0.45vw, 6px);
	height: clamp(10px, 1.1vw, 14px);
	border-radius: 0 2px 2px 0;
	background: #69f0ae;
}

.teslogic-batt-icon.is-charging .teslogic-batt-icon__body {
	box-shadow: 0 0 12px rgba(105, 240, 174, 0.6);
}

.teslogic-batt-icon.is-discharging .teslogic-batt-icon__body {
	border-color: #ffd600;
	box-shadow: 0 0 12px rgba(255, 214, 0, 0.55);
	overflow: visible;
	height: clamp(24px, 2.5vw, 32px);
}

.teslogic-batt-icon.is-discharging .teslogic-batt-icon__fill {
	opacity: 0.55;
}

.teslogic-batt-icon.is-discharging .teslogic-batt-icon__nub {
	background: #ffd600;
}

.teslogic-batt-icon.is-discharging .teslogic-batt-icon__mark {
	color: #ffea00;
	text-shadow: none;
	font-size: clamp(1.05rem, 1.45vw, 1.4rem);
}

.teslogic-batt-icon__mark--discharge {
	color: #ffea00;
	-webkit-text-fill-color: #ffea00;
}

.teslogic-batt-icon__mark--discharge::before {
	content: '';
	position: absolute;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.72);
	z-index: -1;
}

.teslogic-batt-icon__arrow {
	display: block;
	width: 0.95em;
	height: 0.95em;
	filter:
		drop-shadow(0 0 1px #000)
		drop-shadow(0 0 5px rgba(255, 234, 0, 0.95));
	animation: teslogic-discharge-arrow 0.85s ease-in-out infinite;
}

@keyframes teslogic-discharge-arrow {
	0%,
	100% {
		transform: translateY(-2px) scale(1);
		opacity: 1;
	}

	50% {
		transform: translateY(3px) scale(1.08);
		opacity: 0.82;
	}
}

@media (prefers-reduced-motion: reduce) {
	.teslogic-batt-icon__arrow {
		animation: none;
	}
}

.teslogic-card--battery .teslogic-metric__value {
	font-size: clamp(1.2rem, 1.9vw, 1.7rem);
}

/* Keep legacy selectors harmless if referenced elsewhere */
.tesla-flow-system {
	position: relative;
	z-index: 2;
}

.tesla-flow-title {
	color: #ff8a80;
}

.tesla-card-vitals {
	display: grid;
	gap: 0.15rem;
	margin-top: 0.35rem;
	justify-items: center;
	text-align: center;
}

.tesla-card-vitals small {
	display: block;
	font-size: 0.72rem;
	line-height: 1.3;
	color: rgba(244, 241, 234, 0.72);
}

.tesla-photo-wall {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-color: rgba(100, 210, 255, 0.55);
	box-shadow: 0 0 18px rgba(100, 210, 255, 0.24);
}

.tesla-node-wall.is-home-ac .tesla-charge-icon--home {
	position: relative;
	width: 96px;
	height: 96px;
	display: grid;
	place-items: center;
	border-radius: 4px;
	color: #ffe600;
	overflow: hidden;
	background:
		linear-gradient(rgba(255, 230, 0, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 230, 0, 0.07) 1px, transparent 1px),
		radial-gradient(circle at 50% 35%, rgba(255, 230, 0, 0.24), transparent 62%),
		rgba(12, 10, 6, 0.94);
	background-size: 8px 8px, 8px 8px, auto, auto;
	border: 2px solid rgba(255, 230, 0, 0.55);
	box-shadow:
		0 0 18px rgba(255, 230, 0, 0.28),
		inset 0 0 24px rgba(0, 245, 212, 0.08);
}

.tesla-charge-icon--home .tesla-charge-icon__glow {
	position: absolute;
	inset: 12px;
	border-radius: 2px;
	background: radial-gradient(circle at 50% 60%, rgba(255, 230, 0, 0.35), transparent 70%);
	pointer-events: none;
}

.tesla-charge-icon--home .tesla-charge-icon__scan {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(0, 245, 212, 0.14) 48%,
		transparent 52%
	);
	background-size: 100% 200%;
	animation: tesla-home-charge-scan 2.8s linear infinite;
	pointer-events: none;
	opacity: 0.55;
}

.tesla-charge-icon--home .tesla-charge-icon__svg {
	position: relative;
	z-index: 1;
	width: 58px;
	height: 58px;
	filter: drop-shadow(0 0 6px rgba(255, 230, 0, 0.65));
}

.tesla-charge-icon--home .tesla-charge-icon__brackets {
	color: #00f5d4;
	opacity: 0.92;
}

.tesla-charge-icon--home .tesla-charge-icon__roof {
	opacity: 0.95;
}

.tesla-charge-icon--home .tesla-charge-icon__base {
	opacity: 0.55;
}

.tesla-charge-icon--home .tesla-charge-icon__bolt {
	filter: drop-shadow(0 0 4px rgba(255, 248, 231, 0.85));
}

.tesla-charge-icon--home .tesla-charge-icon__plug {
	opacity: 0.88;
}

.tesla-charge-icon--home .tesla-charge-icon__tag {
	position: absolute;
	left: 50%;
	bottom: 7px;
	z-index: 2;
	transform: translateX(-50%);
	padding: 1px 6px;
	border-radius: 2px;
	font-family: var(--font-display);
	font-size: 0.52rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	color: #0f0c06;
	background: linear-gradient(180deg, #ffe566 0%, #ffcb05 100%);
	border: 1px solid rgba(255, 248, 231, 0.65);
	box-shadow: 0 0 8px rgba(255, 203, 5, 0.55);
}

.tesla-node-wall.is-home-ac .tesla-charge-icon--home svg {
	width: 58px;
	height: 58px;
}

.tesla-node-wall.is-home-ac.is-active .tesla-charge-icon--home {
	border-color: rgba(255, 230, 0, 0.9);
	animation: tesla-home-charge-pulse 2.2s ease-in-out infinite;
}

.tesla-node-wall.is-home-ac.is-active .tesla-charge-icon--home .tesla-charge-icon__bolt {
	animation: tesla-home-charge-bolt 1.4s ease-in-out infinite;
}

@keyframes tesla-home-charge-pulse {
	0%,
	100% {
		box-shadow:
			0 0 18px rgba(255, 230, 0, 0.32),
			inset 0 0 20px rgba(0, 245, 212, 0.08);
	}

	50% {
		box-shadow:
			0 0 28px rgba(255, 230, 0, 0.58),
			0 0 36px rgba(0, 245, 212, 0.22),
			inset 0 0 24px rgba(255, 230, 0, 0.12);
	}
}

@keyframes tesla-home-charge-scan {
	0% {
		background-position: 0 -100%;
	}

	100% {
		background-position: 0 100%;
	}
}

@keyframes tesla-home-charge-bolt {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.82;
		transform: scale(1.06);
	}
}

.tesla-plan .ecoflow-plan-stat-input.is-home_ac span:first-child {
	display: inline-flex;
	align-items: center;
}

.tesla-plan .ecoflow-plan-stat-input.is-home_ac span:first-child::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
	margin-right: 6px;
	vertical-align: -2px;
	background-color: #ffe600;
	filter: drop-shadow(0 0 4px rgba(255, 230, 0, 0.55));
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M8 8v14h3V11h9V8H8zm45 0H46v9h-9v3h12V8zm0 48H46V44h-9v-3h12v12zM8 56V44h3v9h9v3H8zM32 11 17 24h30L32 11zM21 24h22v15H21V24zm10 6h2v9h-2V30zM35 27 25 39h7l-5 11 13-19h-7l2-4zM27 42h10v4H27v-4zm-2 46h4v5h-4v-5zm14 0h4v5h-4v-5z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M8 8v14h3V11h9V8H8zm45 0H46v9h-9v3h12V8zm0 48H46V44h-9v-3h12v12zM8 56V44h3v9h9v3H8zM32 11 17 24h30L32 11zM21 24h22v15H21V24zm10 6h2v9h-2V30zM35 27 25 39h7l-5 11 13-19h-7l2-4zM27 42h10v4H27v-4zm-2 46h4v5h-4v-5zm14 0h4v5h-4v-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tesla-node-wall.is-away-ac .tesla-photo-wall {
	border-color: rgba(0, 245, 212, 0.55);
	box-shadow: 0 0 18px rgba(0, 245, 212, 0.24);
}

.tesla-photo-super {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-color: rgba(232, 33, 39, 0.6);
	box-shadow: 0 0 18px rgba(232, 33, 39, 0.28);
}

.tesla-photo-cabin {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-color: rgba(105, 240, 174, 0.5);
	box-shadow: 0 0 18px rgba(105, 240, 174, 0.2);
}

.tesla-photo-car {
	border-color: var(--batt-tone, #e82127);
	object-position: 58% 72%;
}

/* Teslogic dial fills the Tesla hero art frame (no car photo). */
.tesla-flow-system [data-flow-id="tesla"] .ecoflow-node-art.tesla-dash-art {
	position: relative;
	display: grid;
	place-items: center;
	width: min(280px, 72vw);
	height: min(280px, 72vw);
	margin: 0 auto 0.35rem;
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 42%, rgba(24, 28, 36, 0.98) 0%, rgba(4, 6, 10, 1) 78%);
	border: 1px solid rgba(77, 163, 255, 0.28);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45),
		0 12px 28px rgba(0, 0, 0, 0.45);
}

.tesla-dash-gauge {
	--tesla-dash-ring: #4da3ff;
	position: relative;
	right: auto;
	bottom: auto;
	width: min(236px, 62vw);
	height: min(236px, 62vw);
	z-index: 1;
	pointer-events: none;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.tesla-dash-gauge__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tesla-dash-gauge__ring {
	stroke: var(--tesla-dash-ring);
	filter: drop-shadow(0 0 6px rgba(77, 163, 255, 0.55));
}

.tesla-dash-gauge.is-charging .tesla-dash-gauge__ring {
	stroke: var(--batt-tone, #69f0ae);
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--batt-tone, #69f0ae) 70%, transparent));
}

.tesla-dash-gauge__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.14rem;
	padding: 18px 12px 16px;
	border-radius: 50%;
	background: transparent;
	text-align: center;
	line-height: 1;
	pointer-events: none;
}

.tesla-dash-gauge__gears {
	display: flex;
	gap: 0.55rem;
	margin-bottom: 0.28rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(180, 188, 200, 0.42);
}

.tesla-dash-gauge__gears .is-active {
	color: #ffffff;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.tesla-dash-gauge__speed {
	font-size: clamp(2.6rem, 8vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.tesla-dash-gauge__unit {
	margin-top: 0.12rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(170, 178, 190, 0.72);
}

.tesla-dash-gauge__soc {
	display: inline-flex;
	align-items: center;
	gap: 0.32rem;
	margin-top: 0.55rem;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #f4f1ea;
	font-variant-numeric: tabular-nums;
}

.tesla-dash-gauge__batt {
	position: relative;
	width: 22px;
	height: 11px;
	border: 1.5px solid rgba(244, 241, 234, 0.7);
	border-radius: 2px;
	box-sizing: border-box;
}

.tesla-dash-gauge__batt::after {
	content: "";
	position: absolute;
	top: 2px;
	right: -4px;
	width: 2.5px;
	height: 5px;
	border-radius: 0 1px 1px 0;
	background: rgba(244, 241, 234, 0.7);
}

.tesla-dash-gauge__batt-fill {
	display: block;
	height: 100%;
	width: calc(var(--battery-level, 0) * 1%);
	max-width: 100%;
	background: var(--batt-tone, #69f0ae);
	border-radius: 1px;
}

.tesla-dash-gauge__soc.is-charging .tesla-dash-gauge__batt {
	box-shadow: 0 0 6px color-mix(in srgb, var(--batt-tone, #69f0ae) 65%, transparent);
}

.tesla-dash-gauge.is-asleep {
	opacity: 0.78;
}

.tesla-dash-gauge.is-asleep .tesla-dash-gauge__ring {
	stroke: rgba(120, 130, 145, 0.55);
	filter: none;
}

.tesla-flow-system [data-flow-id="tesla"].is-standby .tesla-dash-art {
	opacity: 0.78;
	filter: saturate(0.75) brightness(0.88);
}

.tesla-flow-system [data-flow-id="tesla"].is-active .tesla-dash-art {
	opacity: 1;
	filter: none;
	border-color: color-mix(in srgb, var(--batt-tone, #4da3ff) 55%, rgba(77, 163, 255, 0.35));
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45),
		0 12px 28px rgba(0, 0, 0, 0.45),
		0 0 24px color-mix(in srgb, var(--batt-tone, #4da3ff) 28%, transparent);
}

.tesla-node-wall {
	--flow-pulse: rgba(100, 210, 255, 0.42);
}

.tesla-node-super {
	--flow-pulse: rgba(232, 33, 39, 0.42);
}

.tesla-node-drive {
	--flow-pulse: rgba(255, 179, 0, 0.42);
}

.tesla-node-drive.is-regen {
	--flow-pulse: rgba(100, 210, 255, 0.42);
}

.tesla-node-cabin {
	--flow-pulse: rgba(105, 240, 174, 0.42);
}

.tesla-flow-system [data-flow-id="tesla"].is-active .ecoflow-node-art {
	animation: flow-hero-glow 2s ease-out infinite;
}

.tesla-flow-system .ecoflow-node.is-active .ecoflow-node-photo:not(.tesla-photo-car),
.tesla-flow-system .ecoflow-node.is-active .tesla-shift {
	animation: flow-icon-glow 2s ease-out infinite;
}

@keyframes flow-hero-glow {
	0% {
		box-shadow:
			0 0 0 0 var(--flow-pulse, rgba(0, 245, 212, 0.42)),
			0 0 28px color-mix(in srgb, var(--batt-tone, #34c759) 38%, transparent),
			0 12px 24px rgba(0, 0, 0, 0.5);
	}

	70% {
		box-shadow:
			0 0 0 16px transparent,
			0 0 28px color-mix(in srgb, var(--batt-tone, #34c759) 38%, transparent),
			0 12px 24px rgba(0, 0, 0, 0.5);
	}

	100% {
		box-shadow:
			0 0 0 0 transparent,
			0 0 28px color-mix(in srgb, var(--batt-tone, #34c759) 38%, transparent),
			0 12px 24px rgba(0, 0, 0, 0.5);
	}
}

@keyframes flow-icon-glow {
	0% {
		box-shadow:
			0 0 0 0 var(--flow-pulse, rgba(0, 245, 212, 0.42)),
			0 0 22px var(--flow-pulse, rgba(0, 245, 212, 0.28));
	}

	70% {
		box-shadow:
			0 0 0 14px transparent,
			0 0 22px var(--flow-pulse, rgba(0, 245, 212, 0.28));
	}

	100% {
		box-shadow:
			0 0 0 0 transparent,
			0 0 22px var(--flow-pulse, rgba(0, 245, 212, 0.28));
	}
}

@keyframes flow-hero-breathe {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tesla-flow-system [data-flow-id="tesla"].is-active .ecoflow-node-art,
	.tesla-flow-system .ecoflow-node.is-active .ecoflow-node-photo:not(.tesla-photo-car),
	.tesla-flow-system .ecoflow-node.is-active .tesla-shift,
	.ecoflow-system-pro [data-flow-id="pro"].is-active .ecoflow-node-art,
	.ecoflow-system-pro [data-flow-id="pro"].is-active .ecoflow-node-photo,
	.ecoflow-system-pro .ecoflow-node.is-active:not([data-flow-id="pro"]) .ecoflow-node-photo,
	.ecoflow-system-pro .ecoflow-node.is-active .ecoflow-node-banner-art,
	.ecoflow-system-delta [data-flow-id="delta"].is-active .ecoflow-node-art,
	.ecoflow-system-delta [data-flow-id="delta"].is-active .ecoflow-node-photo,
	.ecoflow-system-delta [data-flow-id="extra"].is-active .ecoflow-extra-pack,
	.ecoflow-system-delta [data-flow-id="extra"].is-active .ecoflow-node-photo-extra,
	.ecoflow-system-delta .ecoflow-node.is-active:not([data-flow-id="delta"]):not([data-flow-id="extra"]) .ecoflow-node-photo,
	.ecoflow-system-delta .ecoflow-node.is-active .ecoflow-node-banner-art {
		animation: none;
	}

	.hub-switcher,
	.site-header .header-inner {
		transition: none;
	}
}

.tesla-shift {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 14px;
	font-size: 3.6rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	color: #f5f5f5;
	background: #141418;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.tesla-shift.is-p {
	color: #ff8a80;
	border-color: rgba(232, 33, 39, 0.55);
	box-shadow: 0 0 18px rgba(232, 33, 39, 0.22);
}

.tesla-shift.is-r {
	color: #ffd54f;
	border-color: rgba(255, 179, 0, 0.55);
	box-shadow: 0 0 18px rgba(255, 179, 0, 0.22);
}

.tesla-shift.is-n {
	color: #cfd8dc;
	border-color: rgba(255, 255, 255, 0.2);
}

.tesla-shift.is-d {
	color: #69f0ae;
	border-color: rgba(0, 200, 83, 0.5);
	box-shadow: 0 0 18px rgba(0, 200, 83, 0.2);
}

.tesla-shift.is-unknown {
	color: #9aa0a6;
}

.tesla-node-wall.is-active {
	border-color: rgba(100, 210, 255, 0.7);
}

.tesla-node-super.is-active {
	border-color: rgba(232, 33, 39, 0.75);
}

.tesla-node-drive.is-active {
	border-color: rgba(255, 179, 0, 0.7);
}

.tesla-gas-saved {
	color: #69f0ae;
	font-weight: 700;
}

.tesla-node-drive.is-regen.is-active {
	border-color: rgba(100, 210, 255, 0.75);
}

.tesla-node-cabin.is-active {
	border-color: rgba(105, 240, 174, 0.7);
}

@media (max-width: 800px) {
	.tesla-flow-system {
		grid-template-columns: 1fr;
	}
}

/* Phone only: stack Teslogic cards. Tablets keep the full 3+4 layout. */
@media (max-width: 640px) {
	.teslogic-top {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.teslogic-card--battery {
		grid-column: 1 / -1;
		order: -1;
	}

	.tesla-flow-map.teslogic-map .teslogic-top {
		grid-template-columns: 1fr;
		max-width: none;
	}

	.tesla-flow-map.teslogic-map .teslogic-card--battery {
		grid-column: auto;
	}

	.teslogic-bottom {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
}

/* Tablet / desktop: keep room for flow lines between cards */
@media (min-width: 641px) {
	.teslogic-top {
		min-height: 168px;
	}

	.teslogic-card--battery {
		justify-content: center;
		min-height: 100%;
	}

	.teslogic-card__extras {
		display: grid;
	}
}

@media (min-width: 1100px) {
	.teslogic-system {
		max-width: 1240px;
		gap: 32px;
	}

	.teslogic-top {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr);
		gap: 24px 36px;
	}

	.tesla-flow-map.teslogic-map .teslogic-top {
		grid-template-columns: minmax(280px, 360px);
		gap: 0;
		max-width: min(420px, 100%);
	}

	.teslogic-bottom {
		gap: 18px;
	}

	.teslogic-card__icon {
		width: 1.55rem;
		height: 1.55rem;
		font-size: 1.15rem;
	}

	.tesla-flow-map.teslogic-map .teslogic-card:not(.teslogic-card--battery) .teslogic-card__icon {
		width: clamp(3.2rem, 5.5vw, 4.2rem);
		height: clamp(3.2rem, 5.5vw, 4.2rem);
		font-size: clamp(2.3rem, 4vw, 3.1rem);
	}
}

.pw-flow-dashboard-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.pw-flow-dashboard-header h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
}

.pw-flow-updated {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.pw-flow-home-note {
	margin: 0 0 12px;
	padding: 10px 14px;
	font-size: 0.84rem;
	color: #a5d6a7;
	background: rgba(105, 240, 174, 0.08);
	border: 1px solid rgba(105, 240, 174, 0.22);
	border-radius: var(--radius-md);
}

.pw-flow-model3-note {
	margin: 0 0 12px;
	padding: 10px 14px;
	font-size: 0.84rem;
	color: #90caf9;
	background: rgba(66, 165, 245, 0.08);
	border: 1px solid rgba(66, 165, 245, 0.22);
	border-radius: var(--radius-md);
}

.pw-flow-solar-note {
	margin: 0 0 12px;
	padding: 10px 14px;
	font-size: 0.84rem;
	color: #ffd180;
	background: rgba(255, 179, 0, 0.08);
	border: 1px solid rgba(255, 179, 0, 0.22);
	border-radius: var(--radius-md);
}

.pw-flow-sim-note {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	background: rgba(232, 33, 39, 0.08);
	border: 1px solid rgba(232, 33, 39, 0.18);
	border-radius: var(--radius-md);
}

.pw-flow-live-note {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: #8fd19e;
	background: rgba(0, 200, 83, 0.08);
	border: 1px solid rgba(0, 200, 83, 0.22);
	border-radius: var(--radius-md);
}

.pw-flow-sleep-note {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #cbd5e1;
	background: rgba(30, 41, 59, 0.65);
	border: 1px solid rgba(148, 163, 184, 0.4);
	border-radius: var(--radius-md);
	text-align: center;
	letter-spacing: 0.02em;
}

.pw-flow-error {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: #ff8a80;
	background: rgba(255, 68, 68, 0.08);
	border: 1px solid rgba(255, 68, 68, 0.22);
	border-radius: var(--radius-md);
}

.pw-flow-error-action,
.pw-tesla-link-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 16px;
}

.pw-flow-error-action .pw-flow-error {
	margin: 0;
	flex: 1 1 240px;
}

.pw-tesla-oauth-btn {
	flex: 0 0 auto;
}

.pw-flow-setup-panel {
	margin-bottom: 16px;
	padding: 16px;
	background: rgba(10, 10, 15, 0.72);
	border: 1px solid rgba(232, 33, 39, 0.18);
	border-radius: var(--radius-md);
}

.pw-flow-setup-title {
	margin: 0 0 12px;
	font-weight: 600;
}

.pw-flow-setup-steps {
	margin: 0;
	padding-left: 1.2rem;
	font-size: 0.88rem;
	color: var(--color-text-muted);
}

.pw-flow-setup-steps li + li {
	margin-top: 8px;
}

.pw-flow-stat-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 0.65rem;
	color: #8fd19e;
	background: rgba(0, 200, 83, 0.12);
	border-radius: 999px;
	vertical-align: middle;
}

.pw-flow-stat-card small {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pw-flow-oauth-notice {
	margin: 12px auto;
	max-width: var(--container-width, 1200px);
	padding: 10px 16px;
	text-align: center;
	color: #8fd19e;
	background: rgba(0, 200, 83, 0.12);
	border: 1px solid rgba(0, 200, 83, 0.25);
}

.pw-flow-root {
	margin-bottom: 20px;
}

.pw-model3-unit {
	background:
		linear-gradient(180deg, rgba(232, 33, 39, 0.08), rgba(12, 16, 28, 0.55)),
		var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.28);
	border-radius: var(--radius-lg);
	padding: 20px 24px 18px;
	margin-bottom: 24px;
	box-shadow: 0 0 0 1px rgba(255, 179, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.22);
}

.pw-model3-unit-header {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 16px;
	align-items: center;
	margin-bottom: 18px;
}

.pw-model3-unit-photo {
	width: 112px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(232, 238, 246, 0.18);
	filter: brightness(1.18) saturate(1.02);
}

.pw-model3-unit-photo.is-charging {
	animation: ecoflow-battery-pulse 2s ease-out infinite;
	border-color: rgba(255, 179, 0, 0.55);
}

.pw-model3-unit-class {
	margin: 0 0 4px;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffb300;
}

.pw-model3-unit-identity h3 {
	font-family: var(--font-display);
	font-size: 1.35rem;
	margin: 0 0 8px;
}

.pw-model3-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pw-model3-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	border: 1px solid rgba(232, 238, 246, 0.16);
	background: rgba(12, 16, 28, 0.55);
	color: var(--color-text-muted);
}

.pw-model3-badge.is-raid {
	color: #ffb300;
	border-color: rgba(255, 179, 0, 0.45);
	background: rgba(255, 179, 0, 0.12);
}

.pw-model3-badge.is-clear {
	color: #69f0ae;
	border-color: rgba(105, 240, 174, 0.4);
}

.pw-model3-badge.is-supply,
.pw-model3-badge.is-live {
	color: #7c4dff;
	border-color: rgba(124, 77, 255, 0.4);
}

.pw-model3-badge.is-sentry {
	color: #ff453a;
	border-color: rgba(255, 69, 58, 0.4);
}

.pw-model3-unit-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	align-items: center;
}

.pw-model3-bars {
	display: grid;
	gap: 12px;
}

.pw-model3-bar-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

.pw-model3-bar-meta strong {
	font-family: var(--font-display);
	color: var(--color-text);
	font-size: 0.95rem;
}

.pw-model3-bar-track {
	height: 8px;
	border-radius: 999px;
	background: rgba(232, 238, 246, 0.1);
	overflow: hidden;
	margin: 5px 0 4px;
}

.pw-model3-bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	width: 0;
}

.pw-model3-bar-fill.is-hp {
	background: linear-gradient(90deg, #ff453a, #ffd60a 55%, #34c759);
}

.pw-model3-bar-fill.is-mp {
	background: linear-gradient(90deg, #3d5afe, #00e5ff);
}

.pw-model3-bar-fill.is-quest {
	background: linear-gradient(90deg, #7c4dff, #ff9100);
}

.pw-model3-bar small {
	color: var(--color-text-muted);
	font-size: 0.78rem;
}

.pw-model3-raid {
	display: none;
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: rgba(255, 179, 0, 0.08);
	border: 1px solid rgba(255, 179, 0, 0.28);
}

.pw-model3-raid.is-visible {
	display: block;
}

.pw-model3-raid-title {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffb300;
}

.pw-model3-raid-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.pw-model3-raid-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pw-model3-raid-stat span {
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.pw-model3-raid-stat strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: #ffb300;
}

.pw-model3-raid-combo {
	margin: 10px 0 0;
	font-size: 0.82rem;
	color: #69f0ae;
}

.pw-model3-career {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(232, 238, 246, 0.1);
}

.pw-model3-career span {
	display: block;
	font-size: 0.72rem;
	color: var(--color-text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pw-model3-career strong {
	font-family: var(--font-display);
	font-size: 0.95rem;
}

.pw-model3-battery-panel {
	background: var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.18);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
	margin-bottom: 24px;
}

.pw-model3-battery-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.pw-model3-battery-header h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	margin: 0;
}

.pw-model3-battery-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	align-items: center;
}

.pw-model3-battery-gauge {
	--battery-level: 0;
}

.pw-model3-battery-ring {
	width: 132px;
	height: 132px;
}

.pw-model3-battery-ring .pw-flow-battery-inner {
	width: 98px;
	height: 98px;
}

.pw-model3-battery-ring .pw-flow-battery-value {
	font-size: 1.45rem;
}

.pw-model3-battery-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.pw-model3-battery-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pw-model3-battery-stat-label {
	font-size: 0.78rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pw-model3-battery-stat strong {
	font-family: var(--font-display);
	font-size: 1.25rem;
}

.pw-model3-battery-stat small {
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.pw-model3-charging-panel {
	grid-column: 1 / -1;
	display: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: rgba(255, 179, 0, 0.08);
	border: 1px solid rgba(255, 179, 0, 0.22);
}

.pw-model3-charging-panel.is-visible {
	display: grid;
}

.pw-model3-charging-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pw-model3-charging-stat span {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.pw-model3-charging-stat strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: #ffb300;
}

.pw-model3-pin-gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.pw-model3-battery-ring.is-compact {
	width: 72px;
	height: 72px;
}

.pw-model3-battery-ring.is-compact .pw-flow-battery-inner {
	width: 54px;
	height: 54px;
}

.pw-model3-battery-ring.is-compact .pw-flow-battery-value {
	font-size: 0.82rem;
}

.pw-model3-pin-charging {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 0.72rem;
	color: #ffb300;
	line-height: 1.2;
}

.pw-model3-pin-charging small {
	color: var(--color-text-muted);
}

.pw-flow-summary-item small {
	display: block;
	margin-top: 4px;
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.pw-flow-scene {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pw-flow-map {
	position: relative;
	min-height: 300px;
	padding: 16px 12px 12px;
	background:
		radial-gradient(circle at 50% 40%, rgba(232, 33, 39, 0.1) 0%, transparent 45%),
		rgba(232, 33, 39, 0.03);
	border: 1px solid rgba(232, 33, 39, 0.18);
	border-radius: var(--radius-lg);
	overflow: visible;
}

.pw-flow-map.is-house {
	min-height: 0;
	padding: 0;
	overflow: hidden;
	background: #0b1118;
	border-color: rgba(232, 33, 39, 0.28);
	box-shadow: 0 0 28px rgba(232, 33, 39, 0.1);
}

.pw-flow-map.is-gaming {
	min-height: 0;
	padding: 28px 22px 20px;
	overflow: visible;
	background:
		linear-gradient(rgba(0, 245, 212, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 245, 212, 0.045) 1px, transparent 1px),
		radial-gradient(ellipse at 18% 0%, rgba(232, 33, 39, 0.22), transparent 48%),
		radial-gradient(ellipse at 82% 100%, rgba(255, 179, 0, 0.12), transparent 46%),
		#08070f;
	background-size: 22px 22px, 22px 22px, auto, auto, auto;
	border: 1px solid rgba(0, 245, 212, 0.32);
	box-shadow:
		0 0 32px rgba(232, 33, 39, 0.16),
		inset 0 0 48px rgba(0, 0, 0, 0.35);
}

.pw-flow-map.is-gaming::before,
.pw-flow-map.is-gaming::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	z-index: 2;
	pointer-events: none;
	border: 2px solid #00f5d4;
}

.pw-flow-map.is-gaming::before {
	top: 8px;
	left: 8px;
	border-right: 0;
	border-bottom: 0;
}

.pw-flow-map.is-gaming::after {
	right: 8px;
	bottom: 8px;
	border-left: 0;
	border-top: 0;
}

.pw-hud-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.35fr) minmax(120px, 0.9fr);
	grid-template-areas:
		"solar solar solar"
		"grid powerwall home"
		". model3 .";
	gap: 22px 28px;
	align-items: center;
	justify-items: center;
}

.pw-hud-node-solar { grid-area: solar; }
.pw-hud-node-grid { grid-area: grid; }
.pw-hud-node-powerwall { grid-area: powerwall; }
.pw-hud-node-home { grid-area: home; }
.pw-hud-node-model3 { grid-area: model3; }

.pw-hud-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 10px 8px;
	text-align: center;
	background: rgba(8, 7, 15, 0.72);
	border: 1px solid rgba(0, 245, 212, 0.22);
	border-radius: 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pw-hud-node.is-active {
	border-color: rgba(0, 245, 212, 0.7);
	box-shadow: 0 0 22px rgba(0, 245, 212, 0.22);
}

.pw-hud-node-solar.is-active {
	border-color: rgba(255, 179, 0, 0.75);
	box-shadow: 0 0 22px rgba(255, 179, 0, 0.28);
}

.pw-hud-node-grid.is-active {
	border-color: rgba(100, 181, 246, 0.75);
	box-shadow: 0 0 22px rgba(100, 181, 246, 0.28);
}

.pw-hud-node-home.is-active {
	border-color: rgba(105, 240, 174, 0.7);
	box-shadow: 0 0 22px rgba(105, 240, 174, 0.22);
}

.pw-hud-node-model3.is-active,
.pw-hud-node-powerwall.is-active {
	border-color: rgba(232, 33, 39, 0.7);
	box-shadow: 0 0 24px rgba(232, 33, 39, 0.28);
}

.pw-hud-art {
	position: relative;
	display: inline-flex;
	overflow: hidden;
	border-radius: 14px;
}

.pw-hud-photo {
	width: 108px;
	height: 108px;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(0, 245, 212, 0.4);
	box-shadow:
		0 0 18px rgba(0, 245, 212, 0.18),
		0 8px 18px rgba(0, 0, 0, 0.45);
}

.pw-hud-photo-powerwall {
	width: 176px;
	height: 176px;
	border-radius: 18px;
	border-width: 2px;
	border-color: rgba(232, 33, 39, 0.55);
}

.pw-hud-photo-car {
	width: 220px;
	height: 124px;
	border-radius: 16px;
	border-color: rgba(232, 33, 39, 0.45);
}

.pw-hud-fill {
	display: none;
}

.pw-hud-node.is-hero .pw-hud-fill {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--battery-level, 0) * 1%);
	max-height: 100%;
	background: linear-gradient(
		to top,
		rgba(0, 245, 212, 0.5),
		rgba(0, 245, 212, 0.08) 70%,
		transparent
	);
	pointer-events: none;
	z-index: 1;
}

.pw-hud-node.is-hero.is-charging .pw-hud-fill {
	background: linear-gradient(
		to top,
		rgba(255, 179, 0, 0.55),
		rgba(232, 33, 39, 0.18) 70%,
		transparent
	);
}

.pw-hud-pct {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 0.82rem;
	line-height: 1;
	padding: 4px 7px;
	color: #00f5d4;
	background: rgba(6, 5, 12, 0.82);
	border: 1px solid rgba(0, 245, 212, 0.55);
	border-radius: 4px;
}

.pw-hud-node.is-charging .pw-hud-pct {
	color: #ffb300;
	border-color: rgba(255, 179, 0, 0.65);
}

.pw-hud-label {
	font-size: 0.72rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pw-hud-node strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: #fff;
	line-height: 1.2;
}

.pw-hud-soc {
	font-size: 1.45rem;
	color: #00f5d4;
}

.pw-hud-node.is-charging .pw-hud-soc {
	color: #ffb300;
}

.pw-hud-watts {
	font-size: 0.95rem;
	color: #fff;
}

.pw-hud-node-model3 .pw-hud-pct,
.pw-hud-node-powerwall .pw-hud-pct {
	font-size: 1rem;
	padding: 6px 9px;
}

.pw-hud-state,
.pw-hud-charge {
	margin: 0;
	font-size: 0.72rem;
	color: var(--color-text-muted);
	line-height: 1.3;
}

.pw-hud-charge {
	color: #ffb300;
}

.pw-flow-house {
	display: block;
	width: 100%;
	height: auto;
}

.pw-flow-canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.pw-flow-content {
	position: relative;
	z-index: 1;
}

.pw-flow-pins {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.pw-flow-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 108px;
	padding: 8px 10px;
	background: rgba(8, 12, 22, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	pointer-events: auto;
}

.pw-flow-pin.is-active {
	border-color: rgba(232, 33, 39, 0.7);
	box-shadow: 0 0 16px rgba(232, 33, 39, 0.28);
}

.pw-flow-pin-solar {
	left: 49%;
	top: 18%;
	border-color: rgba(255, 179, 0, 0.45);
}

.pw-flow-pin-powerwall {
	left: 70%;
	top: 50%;
	border-color: rgba(232, 33, 39, 0.45);
}

.pw-flow-pin-home {
	left: 34%;
	top: 42%;
	border-color: rgba(105, 240, 174, 0.4);
}

.pw-flow-pin-model3 {
	left: 73%;
	top: 74%;
	border-color: rgba(232, 33, 39, 0.4);
}

.pw-flow-pin-grid {
	left: 91%;
	top: 40%;
	border-color: rgba(100, 181, 246, 0.5);
}

.pw-flow-pin-label {
	font-size: 0.68rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pw-flow-pin strong {
	font-family: var(--font-display);
	font-size: 0.92rem;
	color: #fff;
	line-height: 1.2;
}

.pw-flow-pin-soc {
	position: absolute;
	top: -8px;
	right: -8px;
	font-family: var(--font-display);
	font-size: 0.68rem;
	padding: 2px 6px;
	color: #ffb300;
	background: rgba(8, 12, 22, 0.95);
	border: 1px solid rgba(255, 179, 0, 0.55);
	border-radius: 999px;
}

.pw-flow-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.pw-flow-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 88px;
	padding: 12px 10px;
	text-align: center;
	background: rgba(10, 10, 15, 0.88);
	border: 1px solid rgba(232, 33, 39, 0.16);
	border-radius: var(--radius-md);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pw-flow-node.is-active {
	border-color: rgba(232, 33, 39, 0.55);
	box-shadow: 0 0 16px rgba(232, 33, 39, 0.18);
}

.pw-flow-node-icon {
	font-size: 1.6rem;
	line-height: 1;
}

.pw-flow-node-photo {
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 2px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.pw-flow-node-photo-car {
	width: 88px;
	height: 52px;
}

.pw-flow-node-label {
	font-size: 0.72rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pw-flow-node strong {
	font-family: var(--font-display);
	font-size: 0.95rem;
	color: var(--color-text);
}

.pw-flow-node-state {
	margin: 0;
	font-size: 0.72rem;
	color: var(--color-text-muted);
	line-height: 1.2;
}

.pw-flow-grid-note {
	display: block;
	margin-top: 2px;
	font-size: 0.68rem;
}

.pw-flow-pin-grid .pw-flow-grid-note {
	color: #64b5f6;
}

.pw-flow-node-battery {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	min-width: 0;
}

.pw-flow-battery-ring {
	--battery-level: 0;
	position: relative;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background:
		conic-gradient(
			var(--pw-red) calc(var(--battery-level) * 1%),
			rgba(255, 255, 255, 0.08) 0
		);
	display: grid;
	place-items: center;
}

.pw-flow-battery-ring.is-charging {
	box-shadow: 0 0 18px rgba(255, 179, 0, 0.25);
}

.pw-flow-battery-ring.is-discharging {
	box-shadow: 0 0 18px rgba(232, 33, 39, 0.25);
}

.pw-flow-battery-inner {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: rgba(10, 10, 15, 0.95);
	border: 1px solid rgba(232, 33, 39, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.pw-flow-battery-value {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
}

.pw-flow-battery-label {
	font-size: 0.65rem;
	color: var(--color-text-muted);
	text-align: center;
	line-height: 1.2;
}

.pw-flow-summary-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 10px;
	background: rgba(10, 10, 15, 0.6);
	border-radius: var(--radius-sm);
}

.pw-flow-summary-item span {
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.pw-flow-summary-item strong {
	font-size: 0.88rem;
}

.pw-flow-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.pw-flow-stat-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	background: var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.12);
	border-radius: var(--radius-md);
}

.pw-flow-stat-label {
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

.pw-flow-stat-card strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
}

.pw-flow-cost-section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(232, 33, 39, 0.12);
}

.pw-flow-cost-header h3 {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 1.15rem;
}

.pw-flow-cost-subtitle {
	margin: 0 0 16px;
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.pw-flow-cost-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.pw-flow-cost-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	background: var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.12);
	border-radius: var(--radius-md);
}

.pw-flow-cost-card.is-highlight {
	border-color: rgba(34, 197, 94, 0.45);
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), var(--color-bg-card));
}

.pw-flow-cost-label {
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

.pw-flow-cost-card strong {
	font-family: var(--font-display);
	font-size: 1.2rem;
}

.pw-flow-cost-saved {
	color: #22c55e;
	font-size: 1.35rem !important;
}

.pw-flow-cost-card small {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	line-height: 1.4;
}

.pw-flow-cost-note {
	margin: 14px 0 0;
	font-size: 0.72rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* Powerwall Page */
.powerwall-page .pw-hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.pw-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 25% 50%, rgba(232, 33, 39, 0.14) 0%, transparent 50%),
		radial-gradient(ellipse at 75% 50%, rgba(142, 142, 147, 0.1) 0%, transparent 50%),
		linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
}

.pw-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
	gap: 32px;
	align-items: center;
	padding: 48px 24px;
}

.pw-hero-visual {
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
}

.pw-hero-visual-pair .pw-hero-product {
	width: 100%;
	height: auto;
	border-radius: 14px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	filter: none;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.pw-hero-model3 {
	aspect-ratio: 16 / 10;
}

.pw-hero-content {
	position: relative;
	text-align: left;
	padding: 0;
}

.pw-hero-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 900;
	margin-bottom: 12px;
	background: linear-gradient(135deg, #fff 0%, var(--pw-red) 55%, var(--pw-gray) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.pw-hero-desc {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	margin-bottom: 24px;
	max-width: 560px;
}

.pw-hero-links {
	display: flex;
	gap: 12px;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.pw-hero-links .btn-primary {
	background: linear-gradient(135deg, var(--pw-red) 0%, var(--pw-red-dark) 100%);
	color: #fff;
}

.pw-hero-links .btn-primary:hover {
	box-shadow: 0 0 24px rgba(232, 33, 39, 0.35);
	color: #fff;
}

.pw-specs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 28px;
}

.pw-spec-card {
	background: var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.12);
	border-radius: var(--radius-lg);
	padding: 24px;
}

.pw-spec-card-highlight {
	border-color: rgba(232, 33, 39, 0.35);
	box-shadow: 0 0 24px rgba(232, 33, 39, 0.08);
}

.pw-spec-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	margin-bottom: 12px;
	color: var(--pw-red);
}

.pw-spec-note {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: 12px;
}

.pw-spec-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pw-spec-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pw-spec-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.pw-spec-row dt {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.pw-spec-row dd {
	font-weight: 600;
	text-align: right;
}

.pw-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.pw-highlight-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: rgba(232, 33, 39, 0.05);
	border: 1px solid rgba(232, 33, 39, 0.1);
	border-radius: var(--radius);
	padding: 16px;
}

.pw-highlight-icon {
	font-size: 1.4rem;
	flex-shrink: 0;
}

.pw-highlight-item strong {
	display: block;
	margin-bottom: 4px;
}

.pw-highlight-item p {
	font-size: 0.88rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.pw-news-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pw-news-item {
	background: var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.12);
	border-radius: var(--radius-lg);
	transition: var(--transition);
}

.pw-news-item:hover {
	border-color: var(--pw-red);
	box-shadow: 0 0 16px rgba(232, 33, 39, 0.08);
}

.pw-news-link {
	display: flex;
	gap: 20px;
	padding: 16px;
	color: inherit;
}

.pw-news-link:hover {
	color: inherit;
}

.pw-news-image {
	width: 200px;
	flex-shrink: 0;
	border-radius: var(--radius);
}

.pw-news-content {
	flex: 1;
	min-width: 0;
}

.pw-read-more {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--pw-red);
	font-weight: 600;
}

.pw-sources {
	margin-top: 24px;
	text-align: center;
}

.pw-source-note,
.pw-updated-note {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.pw-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.pw-link-card {
	display: block;
	background: var(--color-bg-card);
	border: 1px solid rgba(232, 33, 39, 0.12);
	border-radius: var(--radius-lg);
	padding: 20px;
	color: inherit;
	transition: var(--transition);
}

.pw-link-card:hover {
	border-color: var(--pw-red);
	box-shadow: 0 0 16px rgba(232, 33, 39, 0.1);
	color: inherit;
}

.pw-link-icon {
	font-size: 1.6rem;
	display: block;
	margin-bottom: 8px;
}

.pw-link-card h3 {
	font-size: 1rem;
	margin-bottom: 6px;
}

.pw-link-card p {
	font-size: 0.88rem;
	color: var(--color-text-muted);
}

@media (max-width: 768px) {
	.pw-home-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.pw-home-top {
		grid-template-columns: 1fr;
	}

	.pw-home-visual {
		order: -1;
	}

	.pw-hero-inner {
		grid-template-columns: 1fr;
		padding-top: 32px;
	}

	.pw-hero-visual {
		order: -1;
	}

	.pw-hero-content {
		text-align: center;
	}

	.pw-hero-links {
		justify-content: center;
	}

	.pw-news-link {
		flex-direction: column;
	}

	.pw-news-image {
		width: 100%;
	}
}

/* EcoFlow Tag */
:root {
	--ecoflow-green: #00c853;
	--ecoflow-green-dark: #00a844;
}

.ecoflow-tag-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ecoflow-green);
	background: rgba(0, 200, 83, 0.12);
	border: 1px solid rgba(0, 200, 83, 0.35);
	padding: 2px 8px;
	border-radius: 4px;
	text-decoration: none;
	transition: var(--transition);
}

.ecoflow-tag-badge:hover {
	background: rgba(0, 200, 83, 0.2);
	color: var(--ecoflow-green);
}

.ecoflow-tag-badge-lg {
	font-size: 0.8rem;
	padding: 4px 14px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.ecoflow-archive-header {
	background: linear-gradient(180deg, #0a1a0f 0%, var(--color-bg-secondary) 100%);
}

.ecoflow-archive-header--below-posts {
	margin-top: 8px;
	border-top: 1px solid rgba(0, 200, 83, 0.18);
}

.ecoflow-archive-header--hub {
	padding-bottom: 0;
	display: none; /* Temporary: hide hub archive chrome; sticky nav remains. */
}

.ecoflow-hub-nav {
	position: sticky;
	top: 70px;
	z-index: 90;
	background: transparent;
	backdrop-filter: none;
	border-bottom: 1px solid transparent;
	transition: top 0.28s ease;
}

.ecoflow-hub-nav-inner {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 10px 0 12px;
}

.ecoflow-hub-nav-inner::-webkit-scrollbar {
	display: none;
}

.ecoflow-hub-nav-link {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(0, 200, 83, 0.35);
	background: rgba(8, 16, 12, 0.3);
	color: var(--ecoflow-green);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: var(--transition);
}

.ecoflow-hub-nav-link:hover {
	background: rgba(8, 16, 12, 0.45);
	color: var(--ecoflow-green);
}

.ecoflow-hub-section {
	scroll-margin-top: 88px;
}

.ecoflow-hub-section-head {
	margin-bottom: 20px;
}

.ecoflow-hub-section-title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	color: var(--color-text);
	margin: 0 0 6px;
}

.ecoflow-hub-section-desc {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	margin: 0;
}

.ecoflow-archive-desc {
	color: var(--color-text-muted);
	margin-top: 8px;
}

.ecoflow-official-links {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}

.ecoflow-btn {
	background: linear-gradient(135deg, var(--ecoflow-green) 0%, var(--ecoflow-green-dark) 100%);
	color: #fff;
}

.ecoflow-btn:hover {
	color: #fff;
	box-shadow: 0 0 20px rgba(0, 200, 83, 0.3);
}

.ecoflow-btn-outline {
	border-color: var(--ecoflow-green);
	color: var(--ecoflow-green);
}

.ecoflow-btn-outline:hover {
	background: rgba(0, 200, 83, 0.1);
	color: var(--ecoflow-green);
}

.ecoflow-empty {
	text-align: center;
	padding: 60px 0;
}

.ecoflow-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-top: 32px;
}

.ecoflow-link-card {
	display: block;
	padding: 24px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-align: center;
	color: inherit;
	transition: var(--transition);
}

.ecoflow-link-card:hover {
	border-color: var(--ecoflow-green);
	color: inherit;
	transform: translateY(-2px);
}

.ecoflow-link-icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 12px;
}

.ecoflow-link-card h3 {
	font-family: var(--font-display);
	font-size: 1rem;
	margin-bottom: 6px;
}

.ecoflow-link-card p {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.ecoflow-kit {
	padding: 28px 0 8px;
	border-top: 1px solid var(--color-border);
}

.ecoflow-kit-head {
	max-width: 40rem;
	margin-bottom: 24px;
}

.ecoflow-kit-eyebrow {
	margin: 0 0 6px;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ecoflow-green);
}

.ecoflow-kit-title {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ecoflow-kit-lead {
	margin: 0 0 10px;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--color-text);
}

.ecoflow-kit-disclaimer {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--color-text-muted);
}

.ecoflow-kit-offer {
	margin: 0 0 8px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--color-text);
}

.ecoflow-kit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ecoflow-kit-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	padding: 16px 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-card);
}

.ecoflow-kit-name {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 1.05rem;
}

.ecoflow-kit-role {
	margin: 0;
	font-size: 0.88rem;
	color: var(--color-text-muted);
}

.ecoflow-kit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ecoflow-kit-btn {
	min-width: 7.5rem;
	text-align: center;
}

.ecoflow-kit-foot {
	margin: 18px 0 0;
	font-size: 0.9rem;
}

.ecoflow-kit-foot a {
	color: var(--ecoflow-green);
}

.ecoflow-a8-banners {
	margin: 24px 0 8px;
	text-align: center;
}

.ecoflow-a8-banners-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.ecoflow-a8-banner {
	position: relative;
}

.ecoflow-a8-banner-label {
	margin: 0 0 8px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.ecoflow-a8-banner a {
	display: inline-block;
	line-height: 0;
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.ecoflow-a8-banner img[width="300"] {
	display: block;
	max-width: 100%;
	height: auto;
}

.ecoflow-a8-banner img[width="1"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 640px) {
	.ecoflow-kit-item {
		align-items: flex-start;
	}

	.ecoflow-kit-actions {
		width: 100%;
	}

	.ecoflow-kit-btn {
		flex: 1 1 auto;
	}
}

.tesla-kit-section {
	padding: 8px 0 32px;
}

.tesla-kit .ecoflow-kit-eyebrow {
	color: #e31937;
}

.tesla-kit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.tesla-kit-card {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.tesla-kit-card-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #120e10;
}

.tesla-kit-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.tesla-kit-card-media:hover img {
	transform: scale(1.04);
}

.tesla-kit-card-badge {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(227, 25, 55, 0.92);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.tesla-kit-card-copy {
	padding: 14px 16px 4px;
}

.tesla-kit-card .ecoflow-kit-actions {
	padding: 8px 16px 16px;
	width: 100%;
}

.tesla-kit-btn {
	background: #111;
	border-color: #111;
	color: #fff;
}

.tesla-kit-btn:hover {
	background: #e31937;
	border-color: #e31937;
	color: #fff;
}

.tesla-kit-btn-outline {
	border-color: #111;
	color: #111;
}

.tesla-kit-btn-outline:hover {
	background: rgba(227, 25, 55, 0.08);
	border-color: #e31937;
	color: #e31937;
}

.tesla-kit .ecoflow-kit-foot a {
	color: #e31937;
}

.lancers-promo {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin: 28px 0 8px;
	padding: 14px;
	border: 1px solid rgba(255, 203, 5, 0.28);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(ellipse at 12% 0%, rgba(255, 203, 5, 0.12), transparent 55%),
		var(--color-bg-card);
}

.lancers-promo-media {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #0c0a08;
}

.lancers-promo-media img {
	display: block;
	width: 100%;
	height: auto;
}

.lancers-promo-eyebrow {
	margin: 0 0 6px;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--pika-yellow);
}

.lancers-promo-title {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
}

.lancers-promo-lead {
	margin: 0 0 16px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.lancers-promo-cta {
	display: inline-flex;
}

.ecoflow-kit-section {
	padding: 8px 0 32px;
}

.lancers-promo-figure {
	margin: 18px 0;
}

.lancers-promo-figure a {
	display: block;
}

@media (max-width: 900px) {
	.tesla-kit-grid {
		grid-template-columns: 1fr;
	}

	.lancers-promo,
	.footer-lancers-bar .lancers-promo--footer {
		grid-template-columns: 1fr;
	}
}

.tesla-tag-badge-lg {
	font-size: 0.8rem;
	padding: 4px 14px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.tesla-archive-header {
	background: linear-gradient(180deg, #1a0a0c 0%, var(--color-bg-secondary) 100%);
}

.tesla-archive-header--hub {
	padding-bottom: 0;
	display: none; /* Temporary: hide hub archive chrome; sticky nav remains. */
}

.tesla-archive-desc {
	color: var(--color-text-muted);
	margin-top: 8px;
}

.tesla-hub-nav {
	position: sticky;
	top: 70px;
	z-index: 90;
	background: transparent;
	backdrop-filter: none;
	border-bottom: 1px solid transparent;
	transition: top 0.28s ease;
}

.tesla-hub-nav-inner {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 10px 0 12px;
}

.tesla-hub-nav-inner::-webkit-scrollbar {
	display: none;
}

.tesla-hub-nav-link {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(227, 25, 55, 0.4);
	background: rgba(18, 8, 10, 0.3);
	color: #ff6b7f;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: var(--transition);
}

.tesla-hub-nav-link:hover {
	background: rgba(18, 8, 10, 0.45);
	color: #ff6b7f;
}

.tesla-hub-section {
	scroll-margin-top: 88px;
}

.tesla-hub-section-head {
	margin-bottom: 20px;
}

.tesla-hub-section-title {
	font-family: var(--font-body);
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-text);
	margin: 0 0 6px;
}

.tesla-hub-section-desc {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	margin: 0;
}

.tesla-tag-badge {
	background: #111;
	color: #fff;
}

.tesla-tag-badge:hover {
	background: #e31937;
	color: #fff;
}

.single-post-tesla .content-wrapper .ecoflow-kit,
.single-post-tesla .content-wrapper .tesla-kit {
	margin-top: 28px;
	padding-top: 8px;
	border-top: none;
}

.post-tesla-links a {
	color: #e31937;
}

.ecoflow-page-nav {
	margin: 8px 0 20px;
	text-align: right;
}

.ecoflow-page-nav a {
	color: #00f5d4;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}

.ecoflow-dashboard-wrap {
	margin-bottom: 40px;
}

.hub-section {
	scroll-margin-top: 80px;
}

#youtube,
#energy,
#kit,
#ecoflow-posts,
#ecoflow-live,
#tesla-posts,
#tesla-live,
#tesla-kit,
#charge,
#drive {
	scroll-margin-top: 88px;
}

.hub-section-intro {
	padding: 20px 0 8px;
	text-align: center;
}

.hub-ecoflow {
	padding-top: 12px;
}

.hub-energy .ecoflow-dashboard-wrap,
.hub-ecoflow .ecoflow-dashboard-wrap {
	margin-bottom: 24px;
}

.ecoflow-dashboard {
	background:
		radial-gradient(ellipse at 0% 0%, rgba(124, 77, 255, 0.12), transparent 42%),
		var(--color-bg-card);
	border: 1px solid rgba(0, 245, 212, 0.22);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: 0 0 28px rgba(124, 77, 255, 0.08);
}

.ecoflow-dashboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.ecoflow-plan + .ecoflow-dashboard-header {
	margin-top: 8px;
}

.ecoflow-dashboard-header h2 {
	font-family: var(--font-display);
	font-size: 1.4rem;
}

.ecoflow-updated {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.ecoflow-device-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
}

.ecoflow-device-bars {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.ecoflow-device-bars .ecoflow-device-bar {
	margin-bottom: 0;
}

.ecoflow-device-bar-secondary {
	padding-top: 12px;
	border-top: 1px dashed rgba(0, 200, 83, 0.18);
	border-bottom: none;
	padding-bottom: 0;
}

.ecoflow-secondary-error {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: #ffb74d;
	background: rgba(255, 183, 77, 0.08);
	border: 1px solid rgba(255, 183, 77, 0.2);
	border-radius: var(--radius);
}

.ecoflow-inferred-note {
	margin: -8px 0 16px;
	padding: 8px 12px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	background: rgba(100, 181, 246, 0.08);
	border: 1px solid rgba(100, 181, 246, 0.18);
	border-radius: var(--radius);
}

.ecoflow-inferred-note-ok {
	color: var(--ecoflow-green);
	background: rgba(0, 200, 83, 0.08);
	border-color: rgba(0, 200, 83, 0.18);
}

.ecoflow-sn {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-top: 4px;
}

.ecoflow-online-badge {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
}

.ecoflow-online-badge.is-online {
	color: var(--ecoflow-green);
	background: rgba(0, 200, 83, 0.12);
	border: 1px solid rgba(0, 200, 83, 0.35);
}

.ecoflow-online-badge.is-offline {
	color: var(--color-text-muted);
	background: rgba(136, 136, 160, 0.12);
	border: 1px solid var(--color-border);
}

.ecoflow-dashboard-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

/* EcoFlow energy flow diagram */
.ecoflow-energy-map {
	position: relative;
	min-height: 280px;
	margin-bottom: 20px;
	padding: 16px 12px;
	background:
		radial-gradient(circle at 50% 45%, rgba(0, 200, 83, 0.08) 0%, transparent 42%),
		rgba(0, 200, 83, 0.03);
	border: 1px solid rgba(0, 200, 83, 0.16);
	border-radius: var(--radius-lg);
	overflow: visible;
}

.ecoflow-energy-map.is-dual {
	min-height: 0;
	padding: 32px 28px 22px;
}

.ecoflow-energy-map.is-gaming {
	background:
		linear-gradient(rgba(0, 245, 212, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 245, 212, 0.045) 1px, transparent 1px),
		radial-gradient(ellipse at 20% 0%, rgba(124, 77, 255, 0.22), transparent 50%),
		radial-gradient(ellipse at 80% 100%, rgba(255, 230, 0, 0.1), transparent 46%),
		#08070f;
	background-size: 22px 22px, 22px 22px, auto, auto, auto;
	border: 1px solid rgba(0, 245, 212, 0.32);
	box-shadow:
		0 0 32px rgba(124, 77, 255, 0.16),
		inset 0 0 48px rgba(0, 0, 0, 0.35);
}

.ecoflow-energy-map.is-gaming::before,
.ecoflow-energy-map.is-gaming::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	z-index: 2;
	pointer-events: none;
	border: 2px solid #00f5d4;
}

.ecoflow-energy-map.is-gaming::before {
	top: 8px;
	left: 8px;
	border-right: 0;
	border-bottom: 0;
}

.ecoflow-energy-map.is-gaming::after {
	right: 8px;
	bottom: 8px;
	border-left: 0;
	border-top: 0;
}

.ecoflow-energy-flow-root {
	margin-bottom: 20px;
}

.ecoflow-energy-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ecoflow-energy-content {
	position: relative;
	z-index: 2;
}

.ecoflow-energy-map.teslogic-map.is-gaming {
	padding: clamp(16px, 2vw, 28px) clamp(12px, 2vw, 22px);
	background:
		radial-gradient(ellipse at 50% 15%, rgba(0, 245, 212, 0.08), transparent 42%),
		radial-gradient(ellipse at 20% 80%, rgba(198, 255, 0, 0.05), transparent 40%),
		#0a0a0c;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: none;
}

.ecoflow-dual-layout.teslogic-dual {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 3.5vw, 48px);
	align-items: start;
	width: 100%;
	max-width: min(1180px, 100%);
	margin-inline: auto;
}

.ecoflow-dual-layout.teslogic-dual .teslogic-system {
	max-width: none;
	width: 100%;
	margin: 0;
}

.ecoflow-dual-layout.teslogic-dual .teslogic-bottom--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 420px;
	margin: 0 auto;
	width: 100%;
}

.ecoflow-dual-layout.teslogic-dual .teslogic-top--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: min(720px, 100%);
	margin: 0 auto;
	width: 100%;
}

.ecoflow-dual-layout.teslogic-dual .teslogic-bottom--triple {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: none;
	margin: 0;
	width: 100%;
}

@media (max-width: 720px) {
	.ecoflow-dual-layout.teslogic-dual .teslogic-bottom--triple {
		grid-template-columns: 1fr;
	}
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--icon-lg .teslogic-card__head {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	text-align: center;
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--icon-lg .teslogic-card__icon {
	width: clamp(3.2rem, 5.5vw, 4.2rem);
	height: clamp(3.2rem, 5.5vw, 4.2rem);
	font-size: clamp(2.3rem, 4vw, 3.1rem);
	opacity: 1;
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--home.is-outputting {
	border-color: #69f0ae;
	box-shadow:
		0 0 0 1px rgba(105, 240, 174, 0.22),
		0 0 18px rgba(105, 240, 174, 0.22),
		0 8px 20px rgba(0, 0, 0, 0.35);
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--home.is-outputting .teslogic-card__icon {
	filter: drop-shadow(0 0 8px rgba(105, 240, 174, 0.55));
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--grid.is-inputting {
	border-color: #c6ff00;
	box-shadow:
		0 0 0 1px rgba(198, 255, 0, 0.22),
		0 0 18px rgba(198, 255, 0, 0.2),
		0 8px 20px rgba(0, 0, 0, 0.35);
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--grid.is-inputting .teslogic-card__icon {
	filter: drop-shadow(0 0 8px rgba(198, 255, 0, 0.55));
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--hv.is-inputting {
	border-color: #ffd600;
	box-shadow:
		0 0 0 1px rgba(255, 214, 0, 0.28),
		0 0 18px rgba(255, 214, 0, 0.22),
		0 8px 20px rgba(0, 0, 0, 0.35);
}

.ecoflow-dual-layout.teslogic-dual .teslogic-card--hv.is-inputting .teslogic-card__icon {
	filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.55));
}

.ecoflow-dual-layout.teslogic-dual .teslogic-bottom:not(.teslogic-bottom--single):not(.teslogic-bottom--triple) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teslogic-card.is-unavailable {
	opacity: 0.55;
	filter: grayscale(0.25);
}

.ecoflow-teslogic-system .ecoflow-node-eta {
	margin: 0;
	text-align: center;
	font-size: 0.72rem;
	color: rgba(244, 241, 234, 0.55);
}

.ecoflow-teslogic-system .ecoflow-node-eta strong {
	display: inline;
	margin-left: 0.35rem;
	color: #c6ff00;
	font-size: 0.78rem;
}

.ecoflow-dual-layout {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: stretch;
}

.ecoflow-system {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) auto minmax(180px, 1fr);
	grid-template-areas:
		"title title title"
		"inputs device output"
		"summary summary summary";
	gap: 16px 40px;
	align-items: center;
	justify-items: center;
	padding: 20px 24px 16px;
	width: 100%;
	border: 1px solid rgba(0, 245, 212, 0.2);
	border-radius: 16px;
	background: rgba(8, 7, 15, 0.5);
}

.ecoflow-system-delta {
	border-color: rgba(255, 230, 0, 0.28);
	background: rgba(12, 10, 4, 0.5);
	grid-template-areas:
		"title title title"
		"inputs device output"
		"inputs extra output"
		"summary summary summary";
}

.ecoflow-system-title {
	grid-area: title;
	position: relative;
	z-index: 2;
	margin: 0;
	width: 100%;
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #00f5d4;
	text-align: left;
	justify-self: stretch;
}

.ecoflow-system-delta .ecoflow-system-title {
	color: #ffe600;
}

.ecoflow-system-pro .ecoflow-input-stack,
.ecoflow-system-delta .ecoflow-input-stack {
	grid-area: inputs;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 168px;
}

.ecoflow-system-pro .ecoflow-input-stack .ecoflow-node,
.ecoflow-system-delta .ecoflow-input-stack .ecoflow-node {
	width: 100%;
}

.ecoflow-node-hv {
	border-color: rgba(255, 145, 0, 0.4);
}

.ecoflow-node-hv.is-active {
	border-color: rgba(255, 145, 0, 0.75);
	box-shadow: 0 0 22px rgba(255, 145, 0, 0.28);
}

.ecoflow-system-pro [data-flow-id="pro"] {
	grid-area: device;
	width: max-content;
	max-width: 100%;
	--flow-pulse: color-mix(in srgb, var(--batt-tone, #34c759) 48%, transparent);
}

.ecoflow-system-pro .ecoflow-node-grid.is-active {
	--flow-pulse: rgba(124, 77, 255, 0.42);
}

.ecoflow-system-pro .ecoflow-node-hv.is-active {
	--flow-pulse: rgba(255, 145, 0, 0.42);
}

.ecoflow-system-pro .ecoflow-node-home.is-active {
	--flow-pulse: rgba(105, 240, 174, 0.42);
}

.ecoflow-system-pro [data-flow-id="pro"].is-active .ecoflow-node-art {
	animation: flow-hero-glow 2s ease-out infinite;
}

.ecoflow-system-pro [data-flow-id="pro"].is-active .ecoflow-node-photo {
	animation: flow-hero-breathe 2.8s ease-in-out infinite;
}

.ecoflow-system-pro .ecoflow-node.is-active:not([data-flow-id="pro"]) .ecoflow-node-photo,
.ecoflow-system-pro .ecoflow-node.is-active .ecoflow-node-banner-art {
	animation: flow-icon-glow 2s ease-out infinite;
}

.ecoflow-system-pro [data-flow-id="home"] {
	grid-area: output;
	width: 100%;
	max-width: 240px;
	justify-self: center;
}

.ecoflow-system-pro .ecoflow-flow-summary-system {
	grid-area: summary;
	grid-template-columns: 1fr 1fr 1fr;
	justify-self: stretch;
	width: 100%;
}

.ecoflow-system-delta .ecoflow-flow-summary-system {
	grid-area: summary;
	grid-template-columns: 1fr 1fr 1fr;
	justify-self: stretch;
	width: 100%;
}

.ecoflow-system-delta .ecoflow-input-stack {
	max-width: 168px;
	align-self: center;
}

.ecoflow-delta-cluster {
	grid-area: device;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: max-content;
	max-width: 100%;
}

.ecoflow-system-delta [data-flow-id="delta"] {
	width: max-content;
	max-width: 100%;
	--flow-pulse: color-mix(in srgb, var(--batt-tone, #34c759) 48%, transparent);
}

.ecoflow-system-delta [data-flow-id="extra"] {
	grid-area: extra;
	width: max-content;
	max-width: 180px;
	justify-self: center;
	--flow-pulse: color-mix(in srgb, var(--batt-tone, #34c759) 48%, transparent);
}

.ecoflow-system-delta .ecoflow-node-grid.is-active,
.ecoflow-system-delta [data-flow-id="deltaGrid"].is-active {
	--flow-pulse: rgba(124, 77, 255, 0.42);
}

.ecoflow-system-delta .ecoflow-node-solar.is-active {
	--flow-pulse: rgba(255, 179, 0, 0.42);
}

.ecoflow-system-delta .ecoflow-node-ups.is-active,
.ecoflow-system-delta [data-flow-id="ups"].is-active {
	--flow-pulse: rgba(105, 240, 174, 0.42);
}

.ecoflow-system-delta [data-flow-id="delta"].is-active .ecoflow-node-art {
	animation: flow-hero-glow 2s ease-out infinite;
}

.ecoflow-system-delta [data-flow-id="delta"].is-active .ecoflow-node-photo {
	animation: flow-hero-breathe 2.8s ease-in-out infinite;
}

.ecoflow-system-delta [data-flow-id="extra"].is-active .ecoflow-extra-pack {
	animation: flow-hero-glow 2s ease-out infinite;
}

.ecoflow-system-delta [data-flow-id="extra"].is-active .ecoflow-node-photo-extra {
	animation: flow-hero-breathe 2.8s ease-in-out infinite;
}

.ecoflow-system-delta .ecoflow-node.is-active:not([data-flow-id="delta"]):not([data-flow-id="extra"]) .ecoflow-node-photo,
.ecoflow-system-delta .ecoflow-node.is-active .ecoflow-node-banner-art {
	animation: flow-icon-glow 2s ease-out infinite;
}

.ecoflow-node-extra {
	min-width: 0;
	padding: 10px 8px;
	border-color: rgba(255, 230, 0, 0.4);
	background: rgba(12, 10, 4, 0.72);
}

.ecoflow-node-extra small {
	display: block;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.ecoflow-extra-pack {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--batt-tone, #34c759) 70%, transparent);
	background: rgba(8, 7, 15, 0.9);
}

.ecoflow-node-photo-extra {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: brightness(1.12) contrast(1.06) saturate(1.08);
}

.ecoflow-node-extra .ecoflow-hud-fill,
.ecoflow-node-extra.is-charging .ecoflow-hud-fill {
	display: none;
}

.ecoflow-node-extra .ecoflow-node-icon {
	position: relative;
	z-index: 2;
}

.ecoflow-phone-batt {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 6px 4px 5px;
	--batt-tone: #34c759;
	background: rgba(8, 10, 16, 0.82);
	border: 1px solid color-mix(in srgb, var(--batt-tone) 55%, transparent);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.ecoflow-phone-batt-icon {
	display: inline-flex;
	align-items: center;
}

.ecoflow-phone-batt-shell {
	position: relative;
	width: 22px;
	height: 11px;
	overflow: hidden;
	border: 1.5px solid var(--batt-tone);
	border-radius: 3px;
	background: rgba(8, 10, 16, 0.55);
}

.ecoflow-phone-batt-fill {
	display: block;
	height: 100%;
	width: calc(var(--battery-level, 0) * 1%);
	max-width: 100%;
	background: var(--batt-tone);
}

.ecoflow-phone-batt-nub {
	width: 2px;
	height: 5px;
	margin-left: 1px;
	border-radius: 0 1px 1px 0;
	background: var(--batt-tone);
}

.ecoflow-phone-batt-pct {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #f4f7fb;
	white-space: nowrap;
}

.ecoflow-node-device.is-hero .ecoflow-phone-batt,
.ecoflow-node-device.is-prominent .ecoflow-phone-batt {
	right: 8px;
	bottom: 8px;
	padding: 5px 8px 5px 6px;
	gap: 6px;
}

.ecoflow-node-device.is-hero .ecoflow-phone-batt-shell,
.ecoflow-node-device.is-prominent .ecoflow-phone-batt-shell {
	width: 28px;
	height: 13px;
}

.ecoflow-node-device.is-hero .ecoflow-phone-batt-pct,
.ecoflow-node-device.is-prominent .ecoflow-phone-batt-pct {
	font-size: 0.92rem;
}

.ecoflow-phone-batt.is-charging .ecoflow-phone-batt-shell {
	box-shadow: 0 0 8px color-mix(in srgb, var(--batt-tone) 70%, transparent);
}

.ecoflow-node-extra .ecoflow-phone-batt {
	right: 4px;
	bottom: 4px;
	padding: 3px 5px 3px 4px;
	gap: 4px;
}

.ecoflow-node-extra .ecoflow-phone-batt-shell {
	width: 20px;
	height: 10px;
}

.ecoflow-node-extra .ecoflow-phone-batt-pct {
	font-size: 0.68rem;
}

.ecoflow-system-delta [data-flow-id="ups"] {
	grid-area: output;
	grid-row: 2 / 4;
	width: 100%;
	max-width: 240px;
	justify-self: center;
	align-self: center;
}

.ecoflow-node-ups {
	align-items: center;
	padding: 10px 8px;
	background: rgba(10, 8, 18, 0.88);
	border-color: rgba(105, 240, 174, 0.35);
}

.ecoflow-flow-summary-system {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100%;
	margin: 4px 0 0;
}

.ecoflow-flow-summary-system .ecoflow-flow-summary-item small {
	display: block;
	margin-top: 4px;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--color-text-muted);
}

.ecoflow-node-grid small,
.ecoflow-node-solar small,
.ecoflow-node-hv small {
	display: block;
	margin-top: 4px;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--color-text-muted);
}

.ecoflow-dual-layout .ecoflow-battery-ring-map {
	width: 72px;
	height: 72px;
}

.ecoflow-dual-layout .ecoflow-node-device {
	background: rgba(10, 8, 18, 0.72);
	border: 1px solid rgba(0, 245, 212, 0.18);
	box-shadow: none;
	padding: 10px 6px;
}

.ecoflow-dual-layout .ecoflow-node-device.is-hero,
.ecoflow-dual-layout .ecoflow-node-device.is-prominent {
	padding: 12px 10px;
	border-color: rgba(0, 245, 212, 0.38);
	box-shadow: 0 0 28px rgba(0, 245, 212, 0.14);
}

.ecoflow-dual-layout .ecoflow-node-state {
	font-size: 1.08rem;
	margin-top: 2px;
	line-height: 1.2;
}

.ecoflow-dual-layout .ecoflow-node-label {
	font-size: 1.125rem;
	letter-spacing: 0.02em;
}

.ecoflow-dual-layout .ecoflow-node-pack {
	font-size: 1.05rem;
}

.ecoflow-node-eta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	margin: 4px 0 0;
	font-size: 0.78rem;
	line-height: 1.2;
	color: var(--color-text-muted);
}

.ecoflow-node-eta strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--ecoflow-green);
}

.ecoflow-node-device.is-discharging .ecoflow-node-eta strong,
.ecoflow-node-extra.is-discharging .ecoflow-node-eta strong {
	color: #ffd60a;
}

.ecoflow-node-extra .ecoflow-node-eta {
	margin-top: 6px;
}

.ecoflow-dual-layout .ecoflow-node strong {
	font-size: 1.5rem;
}

.ecoflow-dual-layout .ecoflow-node-icon {
	font-size: 2.25rem;
}

.ecoflow-dual-layout .ecoflow-node-room small,
.ecoflow-dual-layout .ecoflow-node-solar small,
.ecoflow-dual-layout .ecoflow-node-hv small,
.ecoflow-dual-layout .ecoflow-node-ups small {
	display: block;
	font-size: 1.05rem;
}

.ecoflow-dual-layout .ecoflow-flow-summary-item {
	font-size: 1.2rem;
}

.ecoflow-dual-layout .ecoflow-flow-summary-item strong {
	font-size: 1.575rem;
}

.ecoflow-node-grid-slot {
	width: min(100%, 120px);
}

.ecoflow-node-link {
	min-width: 0;
	padding: 8px 4px;
	background: rgba(10, 8, 18, 0.88);
	border-color: rgba(255, 230, 0, 0.28);
}

.ecoflow-node-photo {
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(0, 245, 212, 0.4);
	box-shadow:
		0 0 18px rgba(0, 245, 212, 0.22),
		0 8px 18px rgba(0, 0, 0, 0.45);
	transition: filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

.ecoflow-node-photo-pro {
	width: 188px;
	height: 188px;
	border-radius: 18px;
	border-width: 2px;
	border-color: var(--batt-tone, #34c759);
	background: #243040;
	filter: brightness(1.12) contrast(1.06) saturate(1.08);
	box-shadow: 0 0 18px color-mix(in srgb, var(--batt-tone, #34c759) 32%, transparent);
}

.ecoflow-node-photo-delta {
	width: 148px;
	height: 148px;
	border-radius: 16px;
	border-width: 2px;
	border-color: var(--batt-tone, #34c759);
	background: #243040;
	filter: brightness(1.12) contrast(1.06) saturate(1.08);
	box-shadow: 0 0 16px color-mix(in srgb, var(--batt-tone, #34c759) 32%, transparent);
}

.ecoflow-node-photo-solar,
.ecoflow-node-photo-grid {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 12px;
	filter: brightness(1.12) contrast(1.06) saturate(1.08);
	box-shadow:
		0 0 18px rgba(0, 0, 0, 0.4),
		0 6px 14px rgba(0, 0, 0, 0.35);
}

.ecoflow-node-photo-solar {
	object-position: center 42%;
	background: #2a3a4c;
	border-color: rgba(255, 214, 64, 0.55);
	box-shadow:
		0 0 20px rgba(255, 214, 64, 0.28),
		0 6px 14px rgba(0, 0, 0, 0.4);
}

.ecoflow-node-photo-grid {
	width: 96px;
	height: 96px;
	object-position: center 46%;
	object-fit: cover;
	background: #1b2433;
	border-color: rgba(124, 77, 255, 0.55);
	filter: brightness(1.22) contrast(1.12) saturate(1.05);
	box-shadow:
		0 0 20px rgba(124, 77, 255, 0.28),
		0 6px 14px rgba(0, 0, 0, 0.4);
}

.ecoflow-node-photo-link {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border-color: rgba(255, 230, 0, 0.55);
	box-shadow:
		0 0 20px rgba(255, 230, 0, 0.35),
		0 6px 14px rgba(0, 0, 0, 0.4);
}

.ecoflow-node-banner-art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 12px;
	background: #243040;
	border: 1px solid rgba(124, 77, 255, 0.4);
}

.ecoflow-node-banner-art .ecoflow-node-icon {
	font-size: 2rem;
}

.ecoflow-node-room {
	align-items: center;
	padding: 10px 8px;
	background: rgba(10, 8, 18, 0.88);
}

.ecoflow-node-photo-room,
.ecoflow-node-photo-ups {
	width: 148px;
	height: 100px;
	object-fit: cover;
	border-radius: 12px;
	background: #243040;
	filter: brightness(1.16) contrast(1.08) saturate(1.08);
	border-color: rgba(105, 240, 174, 0.55);
	box-shadow:
		0 0 22px rgba(105, 240, 174, 0.28),
		0 8px 18px rgba(0, 0, 0, 0.45);
}

.ecoflow-node-photo-room {
	object-position: center 28%;
}

.ecoflow-node-photo-ups {
	object-position: center 40%;
}

.ecoflow-node-room small {
	display: block;
	font-size: 0.7rem;
	color: var(--color-text-muted);
}

.ecoflow-node-device {
	gap: 6px;
	min-width: 0;
}

.ecoflow-node-art {
	position: relative;
	display: inline-flex;
}

.ecoflow-node-device.is-hero .ecoflow-node-art,
.ecoflow-node-device.is-prominent .ecoflow-node-art {
	overflow: hidden;
	border-radius: 18px;
	box-shadow:
		0 0 28px color-mix(in srgb, var(--batt-tone, #34c759) 38%, transparent),
		0 12px 24px rgba(0, 0, 0, 0.5);
}

.ecoflow-node-device.is-prominent .ecoflow-node-art {
	border-radius: 16px;
}

.ecoflow-node-device.is-standby .ecoflow-node-art {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
}

.ecoflow-hud-fill {
	display: none;
}

.ecoflow-hud-pct {
	display: none;
}

.ecoflow-node-device.is-charging .ecoflow-node-photo {
	animation: ecoflow-battery-pulse 2s ease-out infinite;
}

.ecoflow-node.is-standby .ecoflow-node-photo {
	filter: brightness(0.38) saturate(0.48) contrast(0.95);
	box-shadow: none;
}

.ecoflow-node.is-standby:not(.ecoflow-node-device):not(.ecoflow-node-extra) .ecoflow-node-photo {
	border-color: rgba(232, 238, 246, 0.16);
}

.ecoflow-node.is-standby .ecoflow-node-icon {
	opacity: 0.32;
	filter: grayscale(0.45);
}

.ecoflow-node.is-unavailable .ecoflow-node-photo,
.ecoflow-node.is-unavailable .ecoflow-node-photo-delta,
.ecoflow-node.is-unavailable .ecoflow-node-photo-extra,
.ecoflow-node.is-unavailable .ecoflow-node-photo-solar,
.ecoflow-node.is-unavailable .ecoflow-node-photo-grid,
.ecoflow-node.is-unavailable .ecoflow-node-photo-ups {
	filter: grayscale(1) brightness(0.32) contrast(0.9);
	opacity: 0.48;
	box-shadow: none;
	border-color: rgba(232, 238, 246, 0.14);
	animation: none;
}

.ecoflow-node.is-unavailable .ecoflow-node-icon,
.ecoflow-node.is-unavailable .ecoflow-node-banner-art {
	opacity: 0.28;
	filter: grayscale(1) brightness(0.45);
}

.ecoflow-node.is-unavailable .ecoflow-node-art,
.ecoflow-node.is-unavailable .ecoflow-extra-pack {
	box-shadow: none;
}

.ecoflow-node.is-unavailable .ecoflow-phone-batt {
	opacity: 0.35;
	filter: grayscale(1);
}

.ecoflow-flow-summary-dual .ecoflow-flow-summary-item small {
	display: block;
	margin-top: 2px;
	font-size: 1.08rem;
	color: var(--color-text-muted);
}

.ecoflow-energy-nodes {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1.35fr 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		'solar solar solar'
		'grid battery home';
	gap: 16px 12px;
	align-items: center;
	max-width: 520px;
	margin: 0 auto;
}

.ecoflow-node {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 10px 8px;
	border-radius: var(--radius);
	background: rgba(15, 12, 6, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.06);
	transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
	min-width: 0;
}

.ecoflow-node.is-active {
	border-color: rgba(0, 245, 212, 0.65);
	box-shadow: 0 0 22px rgba(0, 245, 212, 0.22);
}

.ecoflow-node-link.is-active {
	border-color: rgba(255, 230, 0, 0.7);
	box-shadow: 0 0 22px rgba(255, 230, 0, 0.28);
}

.ecoflow-energy-nodes .ecoflow-node-solar {
	grid-area: solar;
	justify-self: center;
	width: min(100%, 160px);
}

.ecoflow-energy-nodes .ecoflow-node-grid {
	grid-area: grid;
}

.ecoflow-energy-nodes .ecoflow-node-battery {
	grid-area: battery;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.ecoflow-energy-nodes .ecoflow-node-home {
	grid-area: home;
}

.ecoflow-node-icon {
	font-size: 1.5rem;
	line-height: 1;
	transition: opacity 0.4s ease, filter 0.4s ease;
}

.ecoflow-node-label {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.ecoflow-node strong {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--ecoflow-green);
}

.ecoflow-node-state {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-top: 4px;
}

.ecoflow-node-pack {
	display: block;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	line-height: 1.2;
}

.ecoflow-battery-ring-map {
	width: 148px;
	height: 148px;
	margin: 0 auto;
}

.ecoflow-battery-ring-map.is-charging {
	box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.35);
	animation: ecoflow-battery-pulse 2s ease-out infinite;
}

@keyframes ecoflow-battery-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.28);
	}
	70% {
		box-shadow: 0 0 0 14px rgba(0, 200, 83, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 200, 83, 0);
	}
}

.ecoflow-remain-time-map {
	font-size: 0.78rem;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.ecoflow-flow-summary {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: rgba(0, 200, 83, 0.05);
	border: 1px solid rgba(0, 200, 83, 0.12);
	border-radius: var(--radius);
}

.ecoflow-flow-summary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.ecoflow-flow-summary-item strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--color-text);
}

.ecoflow-battery-card {
	text-align: center;
}

.ecoflow-battery-ring {
	--battery-level: 0;
	width: 180px;
	height: 180px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: conic-gradient(
		var(--ecoflow-green) calc(var(--battery-level) * 1%),
		rgba(255, 255, 255, 0.08) 0
	);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.ecoflow-battery-ring::before {
	content: '';
	position: absolute;
	inset: 10px;
	background: var(--color-bg-card);
	border-radius: 50%;
}

.ecoflow-battery-inner {
	position: relative;
	z-index: 1;
}

.ecoflow-battery-value {
	display: block;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 900;
	color: var(--ecoflow-green);
}

.ecoflow-battery-label {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.ecoflow-remain-time {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.ecoflow-flow-card {
	background: rgba(0, 200, 83, 0.05);
	border: 1px solid rgba(0, 200, 83, 0.15);
	border-radius: var(--radius-lg);
	padding: 20px;
}

.ecoflow-flow-card h3 {
	font-family: var(--font-display);
	font-size: 1rem;
	margin-bottom: 16px;
}

.ecoflow-flow-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ecoflow-flow-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--color-bg);
	border-radius: var(--radius);
}

.ecoflow-flow-icon {
	font-size: 1.4rem;
}

.ecoflow-flow-label {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-bottom: 2px;
}

.ecoflow-flow-item strong {
	font-family: var(--font-display);
	font-size: 1.1rem;
}

.ecoflow-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 0 20px;
	padding: 18px 16px 16px;
	background:
		radial-gradient(ellipse at 0% 0%, rgba(255, 230, 0, 0.08), transparent 50%),
		rgba(8, 7, 15, 0.72);
	border: 1px solid rgba(0, 245, 212, 0.22);
	border-radius: var(--radius-lg);
}

.ecoflow-plan.is-ok {
	border-color: rgba(0, 245, 212, 0.35);
}

.ecoflow-plan.is-deficit {
	border-color: rgba(255, 230, 0, 0.45);
	box-shadow: 0 0 20px rgba(255, 230, 0, 0.08);
}

.ecoflow-plan-header {
	margin-bottom: 14px;
}

.ecoflow-plan-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.ecoflow-plan-day-nav {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}

.ecoflow-plan:not(.ecoflow-cal) > .ecoflow-plan-day-nav {
	position: sticky;
	top: 78px;
	align-self: flex-end;
	z-index: 20;
	margin: 0 0 8px;
	padding: 4px;
	border-radius: 8px;
	background: rgba(8, 7, 15, 0.88);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.ecoflow-plan:not(.ecoflow-cal) > .ecoflow-plan-head {
	margin-top: -42px;
	padding-right: 178px;
}

.ecoflow-plan-day-nav .ecoflow-plan-cancel {
	padding: 6px 12px;
}

.ecoflow-plan-day-nav .ecoflow-plan-cancel.is-active {
	border-color: #ffe600;
	color: #ffe600;
	background: rgba(255, 230, 0, 0.12);
}

.ecoflow-plan-day-nav .ecoflow-plan-cancel:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ecoflow-cal .ecoflow-plan-kicker {
	color: #ff9f1c;
}

.ecoflow-plan-kicker {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	color: #ffe600;
}

.ecoflow-plan-header h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	margin: 0 0 6px;
}

.ecoflow-plan-note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	line-height: 1.45;
}

.ecoflow-plan-limits {
	margin: 8px 0 0;
	font-size: 0.75rem;
	color: rgba(0, 245, 212, 0.8);
}

.ecoflow-plan-hud .ecoflow-rates-stat strong {
	font-size: 1.05rem;
	word-break: break-word;
}

.ecoflow-plan-stat-now.is-charge strong,
.ecoflow-plan.is-deficit .ecoflow-plan-stat-buy strong {
	color: #ffe600;
}

.ecoflow-plan-stat-now.is-solar strong {
	color: #ff9f1c;
}

.ecoflow-plan-stat-now.is-idle strong,
.ecoflow-plan-stat-now.is-past strong {
	color: var(--color-text-muted);
}

.ecoflow-plan-stat-now.is-drive strong {
	color: #ff6b35;
}

.ecoflow-plan-stat-now.is-sleep strong {
	color: #9aa3b5;
}

.tesla-plan {
	--tesla-plan-accent: #d4af37;
	border-color: rgba(232, 33, 39, 0.32);
	background:
		radial-gradient(ellipse at 0% 0%, rgba(232, 33, 39, 0.1), transparent 50%),
		rgba(8, 7, 15, 0.72);
}

.tesla-plan .ecoflow-plan-hud {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tesla-plan .ecoflow-plan-stat-input.is-home_ac strong {
	color: #ffe600;
}

.tesla-plan .ecoflow-plan-stat-input.is-away_ac strong {
	color: #00f5d4;
}

.tesla-plan .ecoflow-plan-stat-input.is-dc strong {
	color: #ff6b6b;
}

.tesla-plan .ecoflow-plan-stat-input.is-none strong {
	color: var(--color-text-muted);
}

.tesla-plan.is-asleep {
	border-color: rgba(154, 163, 181, 0.45);
}

.tesla-plan-location-debug {
	margin: 8px 0 0;
	padding: 8px 12px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: #a8b0c0;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-md, 10px);
}

.tesla-plan-location-calibrate {
	margin: 6px 0 0;
}

.tesla-plan-calibrate-gps {
	font-size: 0.78rem;
	padding: 6px 10px;
	border-radius: var(--radius-md, 10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #d8deea;
	cursor: pointer;
}

.tesla-plan-calibrate-gps:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.1);
}

.tesla-plan-calibrate-gps:disabled {
	opacity: 0.55;
	cursor: wait;
}

.tesla-plan-sleep-note {
	margin: 8px 0 0;
	padding: 10px 14px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #c5c8d0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md, 10px);
}

.tesla-plan.is-asleep .ecoflow-plan-stat-now {
	box-shadow: inset 0 0 0 1px rgba(154, 163, 181, 0.35);
}

.tesla-plan .ecoflow-plan-col.is-sleep,
.tesla-plan .ecoflow-plan-col.is-sleep-hold {
	background: rgba(148, 163, 184, 0.12);
}

.tesla-plan .ecoflow-plan-col.is-sleep-hold .ecoflow-soc-bar-pro.is-held,
.tesla-plan .ecoflow-soc-bar-pro.is-held {
	background: linear-gradient(180deg, #c5ccd8 0%, #8b95a8 100%);
	box-shadow: none;
	opacity: 0.92;
}

.tesla-plan .ecoflow-plan-col.is-now.is-sleep-hold .ecoflow-soc-stack,
.tesla-plan.is-asleep .ecoflow-rate-col.is-now .ecoflow-soc-stack {
	filter: drop-shadow(0 0 8px rgba(180, 190, 210, 0.55));
}

.tesla-plan.is-asleep .ecoflow-rate-col.is-now .ecoflow-rate-bar {
	box-shadow: 0 0 10px rgba(180, 190, 210, 0.45);
	outline: 1px solid rgba(220, 225, 235, 0.7);
}

.tesla-plan .ecoflow-rate-now-pip.is-sleep {
	color: #c5ccd8;
	text-shadow: 0 0 8px rgba(180, 190, 210, 0.55);
	letter-spacing: 0.06em;
}

.tesla-plan .ecoflow-plan-charge-bar.is-deferred {
	opacity: 0.28;
	box-shadow: none;
	background:
		repeating-linear-gradient(
			to top,
			rgba(212, 175, 55, 0.42) 0 3px,
			rgba(255, 255, 255, 0.04) 3px 6px
		);
}

.tesla-plan .ecoflow-plan-charge-bar {
	background:
		repeating-linear-gradient(
			to top,
			rgba(212, 175, 55, 0.88) 0 3px,
			rgba(255, 196, 64, 0.32) 3px 6px
		);
	box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}

.tesla-plan .ecoflow-plan-col.is-charge {
	background: rgba(212, 175, 55, 0.1);
}

.tesla-plan .ecoflow-plan-col.is-charge.is-sleep-hold {
	background: rgba(148, 163, 184, 0.1);
}

.tesla-plan .ecoflow-rate-hour.is-sleep-hold {
	color: #aeb6c4;
}

.tesla-plan .ecoflow-plan-chart.is-asleep-chart .ecoflow-rate-track {
	box-shadow: inset 0 0 0 1px rgba(154, 163, 181, 0.22);
	border-radius: 6px;
}

.tesla-plan .ecoflow-plan-kicker {
	color: #ff6b6b;
}

.tesla-plan .ecoflow-plan-col.is-drive {
	background: rgba(255, 107, 53, 0.1);
}

.ecoflow-plan-next {
	margin: 6px 0 0;
	font-size: 0.75rem;
	color: #ffe600;
}

.ecoflow-plan-next[hidden] {
	display: none;
}

.ecoflow-plan-more {
	margin-top: 14px;
}

.ecoflow-plan-more summary {
	cursor: pointer;
	font-size: 0.78rem;
	color: var(--color-text-muted);
	list-style-position: outside;
}

.ecoflow-plan-more summary:hover {
	color: #00f5d4;
}

.ecoflow-plan-more .ecoflow-plan-grid {
	margin-top: 12px;
}

.ecoflow-plan-col.is-past {
	opacity: 0.55;
}

.ecoflow-plan-chart .ecoflow-rate-col {
	z-index: 5;
}

.ecoflow-plan-chart .ecoflow-price-line {
	z-index: 6;
}

.ecoflow-plan-chart .ecoflow-ac-line {
	z-index: 7;
}

.ecoflow-plan-charge-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background:
		repeating-linear-gradient(
			to top,
			rgba(255, 230, 0, 0.7) 0 3px,
			rgba(255, 159, 28, 0.25) 3px 6px
		);
	box-shadow: 0 0 12px rgba(255, 230, 0, 0.55);
	z-index: 1;
}

.ecoflow-plan-charge-bar[hidden] {
	display: none;
}

.tesla-plan .ecoflow-plan-charge-bar.is-input-home_ac {
	background:
		repeating-linear-gradient(
			to top,
			rgba(255, 230, 0, 0.92) 0 3px,
			rgba(255, 193, 7, 0.34) 3px 6px
		),
		linear-gradient(180deg, rgba(255, 230, 0, 0.18), rgba(255, 193, 7, 0.08));
	box-shadow: 0 0 12px rgba(255, 230, 0, 0.55);
}

.tesla-plan .ecoflow-plan-charge-bar.is-input-away_ac {
	background:
		repeating-linear-gradient(
			to top,
			rgba(0, 245, 212, 0.82) 0 3px,
			rgba(0, 245, 212, 0.28) 3px 6px
		);
	box-shadow: 0 0 12px rgba(0, 245, 212, 0.45);
}

.tesla-plan .ecoflow-plan-charge-bar.is-input-dc {
	background:
		repeating-linear-gradient(
			to top,
			rgba(255, 107, 107, 0.88) 0 3px,
			rgba(255, 107, 107, 0.3) 3px 6px
		);
	box-shadow: 0 0 12px rgba(255, 107, 107, 0.45);
}

.tesla-plan .ecoflow-plan-col.is-charge:has(.is-input-home_ac) {
	background: rgba(255, 230, 0, 0.12);
}

.tesla-plan .ecoflow-plan-col.is-charge:has(.is-input-away_ac) {
	background: rgba(0, 245, 212, 0.1);
}

.tesla-plan .ecoflow-plan-col.is-charge:has(.is-input-dc) {
	background: rgba(255, 107, 107, 0.1);
}

.ecoflow-plan-col.is-charge {
	background: rgba(255, 230, 0, 0.12);
}

.ecoflow-plan-col .ecoflow-rate-bar {
	position: relative;
	z-index: 2;
}

.ecoflow-plan-slots {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	max-height: 280px;
	overflow: auto;
}

.ecoflow-plan-slot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(10, 8, 18, 0.72);
	font-size: 0.7rem;
	line-height: 1.3;
}

.ecoflow-plan-slot.is-charge {
	border-color: rgba(255, 230, 0, 0.55);
	background: rgba(255, 230, 0, 0.08);
}

.ecoflow-plan-slot.is-solar {
	border-color: rgba(0, 245, 212, 0.4);
}

.ecoflow-plan-slot.is-past {
	opacity: 0.45;
}

.ecoflow-plan-slot.is-now {
	box-shadow: 0 0 0 1px #00f5d4;
}

.ecoflow-plan-slot.is-tomorrow {
	border-style: dashed;
}

.ecoflow-plan-slot-hour {
	font-weight: 600;
	color: var(--color-text);
}

.ecoflow-plan-slot-mode,
.ecoflow-plan-slot-yen {
	color: var(--color-text-muted);
}

.ecoflow-plan-slot-watts {
	font-family: var(--font-display);
	color: #00f5d4;
}

.ecoflow-plan-slot.is-charge .ecoflow-plan-slot-watts {
	color: #ffe600;
}

.ecoflow-send-toast {
	position: fixed;
	top: 84px;
	left: 50%;
	z-index: 80;
	max-width: min(540px, calc(100vw - 32px));
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(8, 7, 15, 0.94);
	border: 1px solid rgba(0, 245, 212, 0.55);
	color: #00f5d4;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	font-size: 0.95rem;
	line-height: 1.45;
	transform: translateX(-50%) translateY(-12px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.ecoflow-send-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.ecoflow-send-toast.is-error {
	border-color: rgba(255, 82, 82, 0.7);
	color: #ff8a80;
}

.ecoflow-plan-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.ecoflow-plan-actions[hidden] {
	display: none;
}

.ecoflow-plan-approval {
	flex: 1 1 220px;
	margin: 0;
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.ecoflow-plan.is-approved .ecoflow-plan-approval {
	color: #00f5d4;
}

.ecoflow-plan.is-stale .ecoflow-plan-approval {
	color: #ffe600;
}

.tesla-plan-auto {
	margin: 8px 0 0;
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.tesla-plan-auto.is-error,
.tesla-plan-auto-auth {
	color: #ff8a80;
}

.tesla-plan-auto-auth,
.tesla-plan-auto-key {
	margin: 6px 0 0;
	font-size: 0.82rem;
}

.tesla-plan-auto-key a {
	color: #00f5d4;
}

.ecoflow-plan-approve,
.ecoflow-plan-cancel {
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	padding: 10px 14px;
	border-radius: 999px;
	cursor: pointer;
}

.ecoflow-plan-approve {
	border: 1px solid #00f5d4;
	background: rgba(0, 245, 212, 0.12);
	color: #00f5d4;
}

.ecoflow-plan-cancel {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: var(--color-text-muted);
}

.ecoflow-plan-approve:disabled,
.ecoflow-plan-cancel:disabled {
	opacity: 0.5;
	cursor: wait;
}

.ecoflow-rates {
	position: relative;
	margin: 0 0 20px;
	padding: 18px 16px 16px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(0, 245, 212, 0.08), transparent 38%),
		rgba(8, 7, 15, 0.82);
	border: 1px solid rgba(0, 245, 212, 0.32);
	border-radius: 4px;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45) inset,
		0 0 28px rgba(0, 245, 212, 0.1);
}

.ecoflow-rates::before,
.ecoflow-rates::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.ecoflow-rates::before {
	top: 6px;
	left: 6px;
	border-top: 2px solid #00f5d4;
	border-left: 2px solid #00f5d4;
}

.ecoflow-rates::after {
	right: 6px;
	bottom: 6px;
	border-right: 2px solid #00f5d4;
	border-bottom: 2px solid #00f5d4;
}

.ecoflow-rates-header {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 14px;
}

.ecoflow-rates-kicker {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	color: #00f5d4;
}

.ecoflow-rates-header h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.05rem;
}

.ecoflow-rates-sub,
.ecoflow-rates-updated {
	margin: 4px 0 0;
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.ecoflow-rates-hud {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

.ecoflow-rates-stat {
	padding: 10px 12px;
	background: rgba(10, 8, 18, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
}

.ecoflow-rates-stat span {
	display: block;
	font-family: var(--font-display);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	color: var(--color-text-muted);
}

.ecoflow-rates-stat strong {
	display: block;
	margin-top: 4px;
	font-family: var(--font-display);
	font-size: 1.35rem;
	color: #00f5d4;
	line-height: 1.1;
}

.ecoflow-rates-stat small {
	color: var(--color-text-muted);
	font-size: 0.72rem;
}

.ecoflow-rate-mark-sunny strong,
.ecoflow-rates-stat-low strong {
	color: #00f5d4;
}

.ecoflow-rate-mark-caution strong {
	color: #ffe600;
}

.ecoflow-rate-mark-alert strong {
	color: #ff2d95;
}

.ecoflow-rates-stat-batt strong {
	color: #ffe600;
}

.ecoflow-rates-stat-pv strong {
	color: #ff9f1c;
}

.ecoflow-rate-chart {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 42px;
	column-gap: 6px;
	align-items: stretch;
	margin-top: 12px;
}

.ecoflow-rate-plot {
	min-width: 0;
}

.ecoflow-rate-y {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 140px;
	font-family: var(--font-display);
	font-size: 0.58rem;
	line-height: 1;
}

.ecoflow-rate-y-unit {
	position: absolute;
	top: -12px;
	font-size: 0.52rem;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	text-shadow: none;
}

.ecoflow-rate-y-soc .ecoflow-rate-y-unit {
	right: 0;
}

.ecoflow-rate-y-soc {
	align-items: flex-end;
	color: #ffe600;
	text-shadow: 0 0 6px rgba(255, 230, 0, 0.35);
}

.ecoflow-rate-y-yen .ecoflow-rate-y-unit {
	left: 0;
}

.ecoflow-rate-y-yen {
	align-items: flex-start;
	color: #00f5d4;
	text-shadow: 0 0 6px rgba(0, 245, 212, 0.28);
}

.ecoflow-rate-track {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 140px;
	padding: 0 4px;
	overflow: hidden;
	background:
		repeating-linear-gradient(
			to top,
			rgba(0, 245, 212, 0.12) 0 1px,
			transparent 1px 35px
		),
		rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(0, 245, 212, 0.16);
	border-radius: 2px;
}

.ecoflow-solar-line {
	position: absolute;
	inset: 0 4px;
	width: calc(100% - 8px);
	height: 100%;
	pointer-events: none;
	z-index: 3;
	overflow: visible;
}

.ecoflow-solar-line polygon {
	fill: rgba(255, 159, 28, 0.32);
}

.ecoflow-solar-line polygon.ecoflow-solar-delta {
	fill: rgba(255, 107, 53, 0.4);
}

.ecoflow-solar-line polygon.ecoflow-solar-pro {
	fill: rgba(255, 159, 28, 0.28);
}

.ecoflow-solar-line polyline {
	fill: none;
	stroke: #ff9f1c;
	stroke-width: 2.25px;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 2px rgba(255, 159, 28, 0.55));
}

.ecoflow-price-line {
	position: absolute;
	inset: 0 4px;
	width: calc(100% - 8px);
	height: 100%;
	pointer-events: none;
	z-index: 4;
	overflow: visible;
}

.ecoflow-price-line polyline {
	fill: none;
	stroke: #00f5d4;
	stroke-width: 2.25px;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 2px rgba(0, 245, 212, 0.55));
}

.ecoflow-ac-line {
	position: absolute;
	inset: 0 4px;
	width: calc(100% - 8px);
	height: 100%;
	pointer-events: none;
	z-index: 7;
	overflow: visible;
}

.ecoflow-ac-line polyline {
	fill: none;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.ecoflow-ac-line polyline.ecoflow-ac-line-under {
	stroke: #2a0c00;
	stroke-width: 5.5px;
}

.ecoflow-ac-line polyline.ecoflow-ac-line-over {
	stroke: #ff3d00;
	stroke-width: 2.6px;
	filter: drop-shadow(0 0 3px rgba(255, 61, 0, 0.9));
}

.ecoflow-rate-legend {
	margin: 8px 0 0;
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.tesla-plan-legend-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tesla-plan-legend-list[hidden] {
	display: none;
}

.tesla-plan-legend-list li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	line-height: 1.35;
}

.tesla-plan-legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	flex: none;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tesla-plan-legend-swatch.is-soc {
	background: linear-gradient(180deg, #ffe600, #ff9f1c);
	box-shadow: 0 0 6px rgba(255, 230, 0, 0.45);
}

.tesla-plan-legend-swatch.is-home {
	background:
		repeating-linear-gradient(
			to top,
			rgba(255, 230, 0, 0.92) 0 3px,
			rgba(255, 193, 7, 0.34) 3px 6px
		);
}

.tesla-plan-legend-swatch.is-scheduled {
	background:
		repeating-linear-gradient(
			to top,
			rgba(212, 175, 55, 0.88) 0 3px,
			rgba(255, 196, 64, 0.32) 3px 6px
		);
}

.tesla-plan-legend-swatch.is-away-dc {
	background: linear-gradient(90deg, #00f5d4 0 50%, #ff6b6b 50% 100%);
}

.tesla-plan-legend-swatch.is-drive {
	background: #ff3d00;
	border-radius: 999px;
	height: 3px;
	width: 14px;
	box-shadow: 0 0 4px rgba(255, 61, 0, 0.7);
}

.tesla-plan-legend-swatch.is-price {
	background: #00f5d4;
	border-radius: 999px;
	height: 3px;
	width: 14px;
	box-shadow: 0 0 4px rgba(0, 245, 212, 0.55);
}

.tesla-plan-legend-swatch.is-held {
	background: linear-gradient(180deg, #c5ccd8 0%, #8b95a8 100%);
}

.tesla-plan-legend-swatch.is-deferred {
	opacity: 0.85;
	background:
		repeating-linear-gradient(
			to top,
			rgba(212, 175, 55, 0.42) 0 3px,
			rgba(255, 255, 255, 0.04) 3px 6px
		);
}

.ecoflow-rate-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	min-width: 0;
	position: relative;
}

.ecoflow-soc-stack {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.ecoflow-soc-stack .ecoflow-rate-bar {
	width: 10px;
	max-width: 10px;
	min-height: 0;
	flex: 0 0 auto;
}

.ecoflow-rate-col.is-empty .ecoflow-soc-stack .ecoflow-rate-bar {
	min-height: 0;
	height: 0 !important;
	opacity: 0;
	box-shadow: none;
}

.ecoflow-rate-bar {
	width: 100%;
	max-width: 10px;
	min-height: 3px;
	border-radius: 0;
	background:
		repeating-linear-gradient(
			to top,
			transparent 0 2px,
			rgba(0, 0, 0, 0.28) 2px 3px
		),
		linear-gradient(180deg, #ffe600, #ff9f1c);
	box-shadow: 0 0 8px rgba(255, 230, 0, 0.28);
}

.ecoflow-soc-stack .ecoflow-soc-bar-pro {
	background:
		repeating-linear-gradient(
			to top,
			transparent 0 2px,
			rgba(0, 0, 0, 0.28) 2px 3px
		),
		linear-gradient(180deg, #ffe600, #ffc107);
	box-shadow: 0 0 8px rgba(255, 230, 0, 0.28);
}

.ecoflow-soc-stack .ecoflow-soc-bar-delta {
	background:
		repeating-linear-gradient(
			to top,
			transparent 0 2px,
			rgba(0, 0, 0, 0.22) 2px 3px
		),
		linear-gradient(180deg, #ff9f1c, #ff6b35);
	box-shadow: 0 0 8px rgba(255, 107, 53, 0.4);
}

.ecoflow-soc-stack .ecoflow-soc-bar-delta[hidden],
.ecoflow-rate-chart.is-pro-soc-only .ecoflow-soc-bar-delta {
	display: none;
}

.ecoflow-rate-col.is-forecast .ecoflow-rate-bar {
	opacity: 0.55;
}

.ecoflow-rate-col.is-empty .ecoflow-rate-bar {
	min-height: 0;
	height: 0 !important;
	opacity: 0;
	box-shadow: none;
}

.ecoflow-rate-col.is-now .ecoflow-soc-stack {
	filter: drop-shadow(0 0 10px #ffe600);
}

.ecoflow-rate-col.is-now .ecoflow-rate-bar {
	box-shadow: 0 0 14px #ffe600;
	outline: 1px solid #fff;
}

.ecoflow-rate-col.is-now .ecoflow-soc-bar-delta {
	box-shadow: 0 0 12px #ff6b35;
}

.ecoflow-rate-now-pip {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	color: #00f5d4;
	text-shadow: 0 0 8px #00f5d4;
}

.ecoflow-rate-hours {
	display: flex;
	gap: 2px;
	padding: 4px 4px 0;
}

.ecoflow-rate-hour {
	flex: 1;
	min-width: 0;
	height: 16px;
	font-family: var(--font-display);
	font-size: 0.58rem;
	color: var(--color-text-muted);
	text-align: center;
}

.ecoflow-rate-hour.is-now {
	color: #00f5d4;
	font-weight: 700;
}

.ecoflow-rates-empty {
	margin: 0;
	color: var(--color-text-muted);
}

.ecoflow-plan-chart-hint {
	display: none;
}

@media (max-width: 640px) {
	.ecoflow-rates-hud {
		grid-template-columns: repeat(2, 1fr);
	}

	.tesla-plan .ecoflow-plan-hud {
		grid-template-columns: repeat(2, 1fr);
	}

	.ecoflow-cal-hud-yen {
		grid-template-columns: repeat(2, 1fr);
	}

	.ecoflow-rate-track,
	.ecoflow-rate-y {
		height: 120px;
	}

	.ecoflow-plan:not(.ecoflow-cal) > .ecoflow-plan-head {
		margin-top: 0;
		padding-right: 0;
		padding-top: 4px;
	}

	/* AI PLAN: taller, swipeable 24h plot so bars and lines stay readable. */
	.ecoflow-plan:not(.ecoflow-cal) {
		padding: 16px 10px 14px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-plan-chart {
		grid-template-columns: 30px minmax(0, 1fr) 38px;
		column-gap: 4px;
		margin-top: 8px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-plot {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 245, 212, 0.55) rgba(0, 0, 0, 0.28);
		padding-bottom: 4px;
	}

	.tesla-plan:not(.ecoflow-cal) .ecoflow-rate-plot {
		scrollbar-color: rgba(212, 175, 55, 0.7) rgba(0, 0, 0, 0.28);
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-track,
	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-hours {
		min-width: 38.5rem;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-track,
	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-y {
		height: 200px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-y {
		font-size: 0.7rem;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-y-unit {
		font-size: 0.62rem;
		top: -14px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-soc-stack .ecoflow-rate-bar,
	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-bar {
		width: 16px;
		max-width: 16px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-hour {
		font-size: 0.72rem;
		height: 20px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-now-pip {
		font-size: 0.64rem;
		letter-spacing: 0.04em;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-solar-line polyline,
	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-price-line polyline {
		stroke-width: 3.1px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-ac-line polyline.ecoflow-ac-line-under {
		stroke-width: 6.5px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-ac-line polyline.ecoflow-ac-line-over {
		stroke-width: 3.3px;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-legend {
		font-size: 0.78rem;
		line-height: 1.45;
	}

	.ecoflow-plan-chart-hint {
		display: block;
		margin: 6px 0 0;
		font-size: 0.72rem;
		letter-spacing: 0.04em;
		color: rgba(0, 245, 212, 0.78);
	}
}

.ecoflow-cal .ecoflow-plan-limits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

.ecoflow-cal-nav {
	display: flex;
	gap: 8px;
}

.ecoflow-cal-nav .ecoflow-plan-cancel {
	padding: 6px 12px;
}

.ecoflow-cal-hud .ecoflow-cal-stat-save strong {
	color: #ffe600;
}

.ecoflow-cal-hud-yen {
	grid-template-columns: repeat(4, 1fr);
	margin-top: -6px;
}

.ecoflow-cal-hud-yen .ecoflow-rates-stat strong {
	font-variant-numeric: tabular-nums;
}

.ecoflow-cal-stat-room strong,
.ecoflow-cal-stat-ups strong {
	color: #00f5d4;
}

.ecoflow-cal-stat-buy strong {
	color: #ff9f1c;
}

.ecoflow-cal-stat-net strong {
	color: #ffe600;
}

.ecoflow-node-yen {
	font-variant-numeric: tabular-nums;
	color: #00f5d4;
}

.ecoflow-node-yen.is-buy,
.ecoflow-node-gen {
	color: #ff9f1c;
}

.ecoflow-cal-chart-label {
	margin: 12px 0 0;
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	color: var(--color-text-muted);
}

.ecoflow-cal-today[hidden] {
	display: none;
}

.ecoflow-cal-chart-today {
	grid-template-columns: 34px minmax(0, 1fr);
}

.ecoflow-rate-y-kwh {
	align-items: flex-end;
	color: #ff9f1c;
	text-shadow: 0 0 6px rgba(255, 159, 28, 0.35);
}

.ecoflow-rate-y-kwh .ecoflow-rate-y-unit {
	right: 0;
}

.ecoflow-cal-pv-bar {
	background:
		repeating-linear-gradient(
			to top,
			transparent 0 2px,
			rgba(0, 0, 0, 0.22) 2px 3px
		),
		linear-gradient(180deg, #ffc14d, #ff7a18);
	box-shadow: 0 0 8px rgba(255, 159, 28, 0.32);
}

.ecoflow-cal-col.is-now .ecoflow-cal-pv-bar {
	box-shadow: 0 0 14px #ff9f1c;
	outline: 1px solid #fff;
}

.ecoflow-cal-out-line {
	position: absolute;
	inset: 0 4px;
	width: calc(100% - 8px);
	height: 100%;
	pointer-events: none;
	z-index: 6;
	overflow: visible;
}

.ecoflow-cal-out-line polyline {
	fill: none;
	stroke: #7ad7ff;
	stroke-width: 2.25px;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 2px rgba(122, 215, 255, 0.55));
}

.ecoflow-cal-chart .ecoflow-price-line {
	z-index: 7;
}

.ecoflow-cal-chart .ecoflow-rate-col {
	z-index: 5;
}

.ecoflow-cal-chart .ecoflow-rate-track,
.ecoflow-cal-chart .ecoflow-rate-hours {
	gap: 1px;
}

.ecoflow-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	margin: 16px 0 6px;
	font-size: 0.72rem;
	color: var(--color-text-muted);
	text-align: center;
}

.ecoflow-cal .ecoflow-plan-slots {
	grid-template-columns: repeat(7, 1fr);
	max-height: none;
	overflow: visible;
}

.ecoflow-cal .ecoflow-plan-slot.is-blank {
	visibility: hidden;
	border: 0;
	background: transparent;
	padding: 0;
	min-height: 0;
}

.ecoflow-cal .ecoflow-plan-slot b {
	font-weight: 600;
}

.ecoflow-cal .ecoflow-plan-slot-watts {
	color: #ff9f1c;
}

.ecoflow-cal .ecoflow-plan-card:nth-child(4) strong {
	color: #ffe600;
}

@media (max-width: 860px) {
	.ecoflow-cal .ecoflow-plan-slots {
		gap: 6px;
	}

	.ecoflow-cal .ecoflow-plan-slot {
		padding: 6px 4px;
		font-size: 0.62rem;
	}
}

.tesla-cal {
	border-color: rgba(232, 33, 39, 0.32);
	background:
		radial-gradient(ellipse at 0% 0%, rgba(232, 33, 39, 0.1), transparent 50%),
		rgba(8, 7, 15, 0.72);
}

.tesla-cal .ecoflow-plan-kicker {
	color: #ff6b6b;
}

.tesla-cal .ecoflow-plan-note a,
.tesla-flow-note a {
	margin-left: 0.4em;
	color: #00f5d4;
}

.tesla-cal-chart-today {
	grid-template-columns: 34px minmax(0, 1fr) 42px;
}

.tesla-charge-list {
	list-style: none;
	margin: 0.85rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.tesla-charge-row {
	display: grid;
	gap: 0.45rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	background: rgba(10, 8, 18, 0.72);
}

.tesla-charge-row.is-active {
	border-color: rgba(0, 245, 212, 0.35);
	box-shadow: inset 0 0 0 1px rgba(0, 245, 212, 0.12);
}

.tesla-charge-when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.65rem;
}

.tesla-charge-when strong {
	font-family: var(--font-display);
	font-size: 0.98rem;
	color: #f4f1ea;
}

.tesla-charge-badge,
.tesla-charge-limit {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	padding: 0.12rem 0.45rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(244, 241, 234, 0.78);
}

.tesla-charge-badge {
	border-color: rgba(0, 245, 212, 0.35);
	color: #00f5d4;
}

.tesla-charge-supply {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	padding: 0.12rem 0.45rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(244, 241, 234, 0.82);
}

.tesla-charge-row.is-super {
	border-color: rgba(232, 33, 39, 0.28);
}

.tesla-charge-row.is-super .tesla-charge-supply {
	border-color: rgba(232, 33, 39, 0.4);
	color: #ff8a8a;
}

.tesla-charge-site {
	font-size: 0.75rem;
	color: rgba(244, 241, 234, 0.62);
}

.tesla-drive-route {
	flex: 1 1 100%;
	font-size: 0.78rem;
	line-height: 1.35;
	color: rgba(244, 241, 234, 0.68);
}

.tesla-charge-meta {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.35rem;
	font-size: 0.82rem;
	color: rgba(244, 241, 234, 0.78);
}

.tesla-gas-list .tesla-charge-meta {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tesla-gas-summary {
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	background: linear-gradient(145deg, rgba(18, 28, 36, 0.92), rgba(10, 14, 20, 0.88));
}

.tesla-gas-summary-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.tesla-gas-summary-kicker {
	margin: 0;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.55);
}

.tesla-gas-summary-head strong {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--font-display);
	font-size: 1rem;
	color: rgba(244, 241, 234, 0.92);
}

.tesla-gas-summary-tabs {
	display: inline-flex;
	gap: 0.35rem;
}

.tesla-gas-summary-tab {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.12);
	margin: 0;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius);
	background: rgba(0, 0, 0, 0.22);
	color: rgba(244, 241, 234, 0.62);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
}

.tesla-gas-summary-tab.is-active {
	border-color: rgba(0, 245, 212, 0.35);
	background: rgba(0, 245, 212, 0.12);
	color: #00f5d4;
}

.tesla-gas-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.55rem;
}

.tesla-gas-summary-stat {
	min-width: 0;
}

.tesla-gas-summary-stat span {
	display: block;
	font-size: 0.72rem;
	color: rgba(244, 241, 234, 0.55);
}

.tesla-gas-summary-stat strong {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: rgba(244, 241, 234, 0.95);
	line-height: 1.2;
}

.tesla-gas-summary-save strong {
	color: #00f5d4;
}

@media (max-width: 720px) {
	.tesla-gas-summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tesla-charge-meta span {
	min-width: 0;
}

.tesla-charge-empty {
	padding: 1rem 0.9rem;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: var(--radius);
	color: rgba(244, 241, 234, 0.62);
	font-size: 0.9rem;
}

@media (max-width: 720px) {
	.tesla-charge-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tesla-gas-list .tesla-charge-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ecoflow-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}

.ecoflow-plan-card {
	padding: 12px;
	background: rgba(10, 8, 18, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
}

.ecoflow-plan-card strong {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: #00f5d4;
	line-height: 1.3;
}

.ecoflow-plan.is-deficit .ecoflow-plan-card:nth-child(1) strong,
.ecoflow-plan.is-deficit .ecoflow-plan-card:nth-child(2) strong {
	color: #ffe600;
}

.ecoflow-plan-card small {
	display: block;
	margin-top: 4px;
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.ecoflow-plan-soc-end-line {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ecoflow-plan-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	flex: none;
	user-select: none;
}

.ecoflow-plan-hint[hidden] {
	display: none !important;
}

.ecoflow-plan-hint:focus-visible {
	outline: 2px solid rgba(0, 245, 212, 0.7);
	outline-offset: 2px;
}

.ecoflow-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
}

.ecoflow-stat-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 14px;
}

.ecoflow-stat-label {
	display: block;
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-bottom: 6px;
}

.ecoflow-stat-card strong {
	font-family: var(--font-display);
	font-size: 1rem;
}

.ecoflow-stat-card small {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

.ecoflow-setup-panel {
	padding: 24px;
	background: rgba(0, 200, 83, 0.05);
	border: 1px dashed rgba(0, 200, 83, 0.3);
	border-radius: var(--radius-lg);
}

.ecoflow-setup-title {
	font-weight: 600;
	margin-bottom: 16px;
}

.ecoflow-setup-steps ol {
	margin: 0 0 16px 20px;
	color: var(--color-text-muted);
}

.ecoflow-setup-steps li {
	margin-bottom: 8px;
}

/* Pokémon GO Page */
.pokemon-go-page .pgo-hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.pgo-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 50%, rgba(255, 203, 5, 0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 50%, rgba(59, 76, 202, 0.15) 0%, transparent 50%),
		linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
}

.pgo-hero-content {
	position: relative;
	text-align: center;
	padding: 60px 24px;
}

.pgo-hero-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 900;
	margin-bottom: 12px;
	background: linear-gradient(135deg, var(--pgo-yellow) 0%, #fff 50%, var(--pgo-blue) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.pgo-hero-desc {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	margin-bottom: 24px;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.pgo-hero-links {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.pgo-hero-links .btn-primary {
	background: linear-gradient(135deg, var(--pgo-yellow) 0%, #e6a800 100%);
	color: #1a1a2e;
}

.pgo-hero-links .btn-primary:hover {
	box-shadow: 0 0 24px rgba(255, 203, 5, 0.35);
	color: #1a1a2e;
}

.pgo-news-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pgo-news-item {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: var(--transition);
	overflow: hidden;
}

.pgo-news-item:hover {
	border-color: var(--pgo-yellow);
	box-shadow: 0 0 16px rgba(255, 203, 5, 0.08);
}

.pgo-news-link {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	color: inherit;
}

.pgo-news-link:hover {
	color: inherit;
}

.pgo-news-image {
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 200px;
	border-radius: 0;
}

.pgo-news-image img {
	object-fit: cover;
}

.pgo-news-image .pgo-image-artwork {
	object-fit: cover;
	padding: 0;
}

.pgo-news-image.pgo-card-image-placeholder {
	min-height: 200px;
	font-size: 3.5rem;
}

.pgo-news-content {
	flex: 1;
	min-width: 0;
	padding: 18px 20px 20px;
}

@media (min-width: 768px) {
	.pgo-news-image {
		aspect-ratio: 21 / 9;
		min-height: 260px;
	}

	.pgo-news-image.pgo-card-image-placeholder {
		min-height: 260px;
	}
}

.pgo-news-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.pgo-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 2px 8px;
	border-radius: 4px;
}

.pgo-badge-news { background: rgba(255, 203, 5, 0.15); color: var(--pika-yellow); }
.pgo-badge-guide { background: rgba(59, 76, 202, 0.18); color: #8fa0ff; }
.pgo-badge-event { background: rgba(255, 203, 5, 0.15); color: var(--pgo-yellow); }
.pgo-badge-update { background: rgba(255, 0, 110, 0.15); color: var(--color-secondary); }
.pgo-badge-default { background: rgba(136, 136, 160, 0.15); color: var(--color-text-muted); }

.pgo-news-title {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 8px;
}

.pgo-news-excerpt {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 8px;
}

.pgo-read-more {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pgo-yellow);
}

.pgo-sources {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.pgo-source-note,
.pgo-updated-note {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: 4px;
}

.pgo-source-note a {
	color: var(--pgo-yellow);
}

.pgo-error {
	text-align: center;
	padding: 48px 24px;
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.pgo-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-top: 24px;
}

.pgo-link-card {
	display: block;
	padding: 24px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-align: center;
	color: inherit;
	transition: var(--transition);
}

.pgo-link-card:hover {
	border-color: var(--pgo-blue);
	color: inherit;
	transform: translateY(-2px);
}

.pgo-link-icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 12px;
}

.pgo-link-card h3 {
	font-family: var(--font-display);
	font-size: 1rem;
	margin-bottom: 6px;
}

.pgo-link-card p {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.pgo-quick-links .section-title {
	text-align: center;
}

/* YouTube */
.pgo-yt-badge {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #ff4444;
	background: rgba(255, 68, 68, 0.1);
	border: 1px solid rgba(255, 68, 68, 0.3);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.pgo-youtube-page-section {
	background: var(--color-bg-secondary);
	border-top: 1px solid var(--color-border);
}

.pgo-home-youtube {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

.pgo-home-yt-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.pgo-home-yt-header h3 {
	font-family: var(--font-display);
	font-size: 1.2rem;
}

.pgo-home-yt-header a {
	font-size: 0.9rem;
	font-weight: 600;
	color: #ff4444;
}

.pgo-yt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.pgo-yt-grid-compact {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.pgo-yt-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: var(--transition);
}

.pgo-yt-card:hover {
	border-color: #ff4444;
	box-shadow: 0 0 16px rgba(255, 68, 68, 0.12);
	transform: translateY(-2px);
}

.pgo-yt-link {
	display: block;
	color: inherit;
}

.pgo-yt-link:hover {
	color: inherit;
}

.pgo-yt-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.pgo-yt-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}

.pgo-yt-card:hover .pgo-yt-thumb img {
	transform: scale(1.05);
}

.pgo-yt-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	color: #ff4444;
	opacity: 0.5;
}

.pgo-yt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	background: rgba(255, 0, 0, 0.85);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1rem;
	padding-left: 3px;
	opacity: 0.9;
	transition: var(--transition);
}

.pgo-yt-card:hover .pgo-yt-play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.1);
}

.pgo-yt-body {
	padding: 14px 16px 16px;
}

.pgo-yt-channel {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #ff4444;
	margin-bottom: 6px;
}

.pgo-yt-title {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pgo-yt-body time {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.pgo-yt-channels {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.pgo-yt-channels p {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: 10px;
}

.pgo-yt-channel-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.pgo-yt-channel-links a {
	font-size: 0.85rem;
	padding: 4px 12px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	color: var(--color-text-muted);
	transition: var(--transition);
}

.pgo-yt-channel-links a:hover {
	border-color: #ff4444;
	color: #ff4444;
}

/* Responsive */
@media (max-width: 768px) {
	.menu-toggle {
		display: flex;
	}

	.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.posts-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		padding-left: 0;
		padding-right: 0;
	}

	.post-card-body {
		padding: 16px;
	}

	.post-hero-overlay .post-title,
	.post-header .post-title {
		font-size: clamp(1.35rem, 6.5vw, 1.85rem);
	}

	.hub-switcher {
		display: block;
		padding: 0 16px 10px;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		background: rgba(15, 12, 6, 0.96);
		overflow: hidden;
		max-height: 72px;
		opacity: 1;
		transition:
			max-height 0.28s ease,
			opacity 0.2s ease,
			padding 0.28s ease,
			border-color 0.28s ease;
	}

	.hub-switcher.is-scroll-hidden {
		max-height: 0;
		opacity: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-top-color: transparent;
		pointer-events: none;
	}

	.ecoflow-hub-nav {
		top: 122px;
		transition: top 0.28s ease;
	}

	.site-header:has(.hub-switcher.is-scroll-hidden):not(:has(.header-inner.is-scroll-hidden)) ~ .site-main .ecoflow-hub-nav {
		top: 70px;
	}

	.tesla-hub-nav {
		top: 122px;
		transition: top 0.28s ease;
	}

	.site-header:has(.hub-switcher.is-scroll-hidden):not(:has(.header-inner.is-scroll-hidden)) ~ .site-main .tesla-hub-nav {
		top: 70px;
	}

	.hub-switcher-track {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		padding: 4px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid var(--color-border);
	}

	.hub-switcher-tab {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		padding: 0 12px;
		border-radius: 999px;
		font-family: var(--font-display);
		font-size: 0.95rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--color-text-muted);
		text-decoration: none;
		transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.hub-switcher-tab--ecoflow.is-active {
		color: #04140a;
		background: linear-gradient(135deg, #00c853 0%, #00a844 100%);
		box-shadow: 0 4px 14px rgba(0, 200, 83, 0.35);
	}

	.hub-switcher-tab--tesla.is-active {
		color: #fff;
		background: linear-gradient(135deg, #1a1a1a 0%, #e31937 120%);
		box-shadow: 0 4px 14px rgba(227, 25, 55, 0.35);
	}

	.hub-switcher-tab:not(.is-active):active {
		background: rgba(255, 255, 255, 0.08);
		color: var(--color-text);
	}

	.site-header:has(.hub-switcher) .main-navigation {
		top: 100%;
	}

	.main-navigation {
		display: none;
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		margin-left: 0;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		padding: 16px 24px;
	}

	.main-navigation.is-open {
		display: block;
	}

	.nav-menu {
		flex-direction: column;
		gap: 16px;
	}

	.hero {
		min-height: 400px;
	}

	.hero-content {
		padding: 60px 24px;
	}

	.lp-hero {
		min-height: auto;
		padding: 108px 0 56px;
	}

	.lp-hero-stats {
		grid-template-columns: 1fr;
	}

	.lp-feature-grid {
		grid-template-columns: 1fr;
	}

	.lp-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.lp-hero-actions .btn {
		text-align: center;
	}

	.section {
		padding: 48px 0;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.post-hero-overlay .post-title,
	.post-header .post-title,
	.archive-title {
		font-size: 1.8rem;
	}

	.pgo-home-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.pgo-view-all {
		align-self: flex-start;
	}

	.pgo-news-image {
		min-height: 160px;
	}

	.ecoflow-dashboard {
		padding: 14px 10px;
	}

	.ecoflow-energy-map.is-dual {
		padding: 10px 6px 8px;
	}

	.ecoflow-energy-map.is-dual .ecoflow-energy-canvas {
		display: none;
	}

	.ecoflow-dual-layout {
		gap: 14px;
	}

	.ecoflow-system,
	.ecoflow-system-delta {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"device"
			"inputs"
			"extra"
			"output";
		gap: 10px;
		padding: 12px 10px 12px;
		align-items: stretch;
		justify-items: stretch;
	}

	.ecoflow-system-title {
		grid-area: title;
		font-size: 0.95rem;
		letter-spacing: 0.06em;
		text-align: left;
	}

	.ecoflow-system-pro .ecoflow-input-stack,
	.ecoflow-system-delta .ecoflow-input-stack {
		grid-area: inputs;
		grid-column: auto;
		grid-row: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		max-width: none;
	}

	.ecoflow-system-pro [data-flow-id="pro"] {
		grid-area: device;
	}

	.ecoflow-delta-cluster {
		grid-area: device;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		max-width: 100%;
	}

	.ecoflow-system-pro [data-flow-id="home"],
	.ecoflow-system-delta [data-flow-id="ups"],
	.ecoflow-system-delta [data-flow-id="extra"] {
		grid-area: output;
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
		justify-self: stretch;
		align-self: stretch;
	}

	.ecoflow-system-delta [data-flow-id="extra"] {
		grid-area: extra;
	}

	.ecoflow-system-pro .ecoflow-flow-summary-system,
	.ecoflow-system-delta .ecoflow-flow-summary-system {
		display: none;
	}

	.ecoflow-system-pro .ecoflow-input-stack .ecoflow-node,
	.ecoflow-system-delta .ecoflow-input-stack .ecoflow-node,
	.ecoflow-node-grid-slot,
	.ecoflow-node-banner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: none;
		min-width: 0;
		flex: none;
		padding: 0;
		text-align: left;
		overflow: hidden;
	}

	.ecoflow-node-banner .ecoflow-node-photo,
	.ecoflow-node-banner-art,
	.ecoflow-node-banner .ecoflow-extra-pack {
		width: 100%;
		height: 118px;
		border-radius: 12px 12px 0 0;
	}

	.ecoflow-node-banner .ecoflow-node-label {
		padding: 10px 12px 0;
	}

	.ecoflow-dual-layout .ecoflow-node-banner strong {
		padding: 2px 12px 4px;
		font-size: 1.4rem;
		justify-self: start;
		white-space: nowrap;
	}

	.ecoflow-node-banner small {
		padding: 0 12px 12px;
		margin-top: 0;
	}

	.ecoflow-node-banner .ecoflow-node-eta {
		padding: 0 12px 12px;
		align-items: flex-start;
	}

	.ecoflow-system-delta [data-flow-id="delta"] {
		width: 100%;
		flex: none;
	}

	.ecoflow-dual-layout .ecoflow-node-device.is-hero,
	.ecoflow-dual-layout .ecoflow-node-device.is-prominent {
		width: 100%;
		padding: 12px 10px 14px;
	}

	.ecoflow-node-photo-pro {
		width: min(176px, 58vw);
		height: min(176px, 58vw);
	}

	.ecoflow-node-photo-delta {
		width: min(156px, 52vw);
		height: min(156px, 52vw);
	}

	.ecoflow-node-device.is-hero .ecoflow-phone-batt,
	.ecoflow-node-device.is-prominent .ecoflow-phone-batt,
	.ecoflow-node-extra .ecoflow-phone-batt {
		right: 6px;
		bottom: 6px;
		padding: 5px 7px 5px 6px;
		gap: 5px;
	}

	.ecoflow-node-device.is-hero .ecoflow-phone-batt-shell,
	.ecoflow-node-device.is-prominent .ecoflow-phone-batt-shell,
	.ecoflow-node-extra .ecoflow-phone-batt-shell {
		width: 24px;
		height: 12px;
	}

	.ecoflow-node-device.is-hero .ecoflow-phone-batt-pct,
	.ecoflow-node-device.is-prominent .ecoflow-phone-batt-pct,
	.ecoflow-node-extra .ecoflow-phone-batt-pct {
		font-size: 0.88rem;
	}

	.ecoflow-dual-layout .ecoflow-battery-ring-map {
		width: 56px;
		height: 56px;
	}

	.ecoflow-dual-layout .ecoflow-battery-value {
		font-size: 0.85rem;
	}

	.ecoflow-dual-layout .ecoflow-battery-label,
	.ecoflow-dual-layout .ecoflow-node-label {
		font-size: 0.86rem;
		letter-spacing: 0;
		overflow-wrap: normal;
		word-break: keep-all;
	}

	.ecoflow-dual-layout .ecoflow-node-pack,
	.ecoflow-dual-layout .ecoflow-node-state,
	.ecoflow-dual-layout .ecoflow-node-room small,
	.ecoflow-dual-layout .ecoflow-node-solar small,
	.ecoflow-dual-layout .ecoflow-node-hv small,
	.ecoflow-dual-layout .ecoflow-node-ups small,
	.ecoflow-node-extra small {
		font-size: 0.82rem;
		overflow-wrap: normal;
		word-break: keep-all;
	}

	.ecoflow-dual-layout .ecoflow-node-state {
		font-size: 1.05rem;
	}

	.ecoflow-dual-layout .ecoflow-node-pack {
		font-size: 0.95rem;
	}

	.ecoflow-dual-layout .ecoflow-node strong {
		font-size: 1.2rem;
	}

	.ecoflow-dual-layout .ecoflow-node-icon {
		font-size: 1.7rem;
	}

	.ecoflow-battery-ring-map {
		width: 120px;
		height: 120px;
	}

	.ecoflow-node strong {
		font-size: 0.9rem;
	}

	.ecoflow-dashboard-grid {
		grid-template-columns: 1fr;
	}

	.pw-flow-pin {
		min-width: 86px;
		padding: 5px 7px;
	}

	.pw-flow-pin strong {
		font-size: 0.78rem;
	}

	.pw-flow-pin-label,
	.pw-flow-node-state,
	.pw-flow-grid-note {
		font-size: 0.6rem;
	}

	.pw-hud-layout {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"solar solar"
			"powerwall powerwall"
			"grid home"
			"model3 model3";
		gap: 16px 12px;
	}

	.pw-hud-photo {
		width: 88px;
		height: 88px;
	}

	.pw-hud-photo-powerwall {
		width: 140px;
		height: 140px;
	}

	.pw-hud-photo-car {
		width: min(100%, 260px);
		height: 120px;
	}

	.pw-flow-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pw-flow-stats-grid {
		grid-template-columns: 1fr;
	}

	.pw-model3-unit-header,
	.pw-model3-unit-body {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.pw-model3-badges,
	.pw-model3-bar-meta {
		justify-content: center;
	}

	.pw-model3-bars,
	.pw-model3-career,
	.pw-model3-raid-grid {
		width: 100%;
	}

	.pw-model3-raid-grid,
	.pw-model3-career {
		grid-template-columns: 1fr;
	}

	.pw-model3-battery-body {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.pw-model3-battery-details {
		width: 100%;
		grid-template-columns: 1fr;
	}

	.pw-model3-charging-panel {
		grid-template-columns: 1fr;
	}

	.pw-flow-cost-grid {
		grid-template-columns: 1fr;
	}

	.pw-flow-battery-ring {
		width: 80px;
		height: 80px;
	}

	.pw-flow-battery-inner {
		width: 62px;
		height: 62px;
	}

	.pw-flow-node {
		min-width: 0;
		padding: 8px 6px;
	}

	.pw-flow-node strong {
		font-size: 0.82rem;
	}
}

/* Tesla energy flow — phone (Teslogic cards). */
@media (max-width: 640px) {
	.tesla-flow-map {
		padding: 12px 8px 10px;
		overflow: hidden;
	}

	.tesla-flow-map .tesla-flow-canvas,
	.tesla-flow-map .ecoflow-energy-canvas {
		display: none;
	}

	.teslogic-system {
		gap: 12px;
	}

	.teslogic-title {
		text-align: left;
		font-size: 0.85rem;
		letter-spacing: 0.08em;
	}

	.teslogic-card {
		padding: 10px;
		border-radius: 14px;
	}

	.teslogic-metric__value {
		font-size: 0.95rem;
	}

	.teslogic-battery__soc {
		font-size: 1.45rem;
	}

	.teslogic-pack-unit {
		grid-template-columns: 1fr;
		gap: 6px;
		margin-top: 8px;
		padding-top: 8px;
	}

	.teslogic-pack-cell {
		padding: 8px;
	}

	.teslogic-batt-icon__body {
		width: 36px;
		height: 18px;
	}

	.teslogic-card__extras {
		display: none;
	}
}

/* Pokémon GO tokushuu (large-event feature pages) */
.pgo-tokushuu-banner-wrap {
	padding: 8px 0 28px;
}

.pgo-tokushuu-banner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 28px 32px;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 203, 5, 0.35);
	background:
		radial-gradient(ellipse at 80% 20%, rgba(255, 203, 5, 0.16), transparent 50%),
		linear-gradient(135deg, #16141f 0%, #1c1a2e 100%);
	color: inherit;
	transition: var(--transition);
}

.pgo-tokushuu-banner:hover {
	color: inherit;
	transform: translateY(-2px);
	box-shadow: 0 0 28px rgba(255, 203, 5, 0.16);
}

.pgo-tokushuu-banner.theme-water {
	border-color: rgba(72, 202, 228, 0.4);
	background:
		radial-gradient(ellipse at 80% 20%, rgba(72, 202, 228, 0.18), transparent 50%),
		linear-gradient(135deg, #0f1c28 0%, #132433 100%);
}

.pgo-tokushuu-banner.theme-raid {
	border-color: rgba(199, 125, 255, 0.4);
	background:
		radial-gradient(ellipse at 80% 20%, rgba(199, 125, 255, 0.18), transparent 50%),
		linear-gradient(135deg, #1a1228 0%, #241833 100%);
}

.pgo-tokushuu-banner.theme-worlds {
	border-color: rgba(255, 203, 5, 0.4);
}

.pgo-tokushuu-banner-copy h2 {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	margin: 10px 0 8px;
}

.pgo-tokushuu-banner-copy .pgo-hero-badge {
	margin-right: 8px;
}

.pgo-tokushuu-banner-icon {
	font-size: 4.5rem;
	line-height: 1;
	opacity: 0.9;
}

.pgo-tokushuu-banner-art {
	width: min(220px, 38vw);
	height: auto;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.pgo-banner-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 16px;
	padding: 0;
	list-style: none;
}

.pgo-banner-steps li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.85rem;
	font-weight: 700;
}

.pgo-ico {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

.pgo-ico-lg {
	width: 1.8rem;
	height: 1.8rem;
	color: var(--pgo-yellow);
	margin-bottom: 8px;
}

.pgo-ico-xl {
	width: 4.5rem;
	height: 4.5rem;
	color: var(--pgo-yellow);
}

.pgo-tokushuu-when {
	font-family: var(--font-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--pgo-yellow);
	margin-bottom: 8px;
}

.pgo-tokushuu-banner-more {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.pgo-tokushuu-mini {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
	color: inherit;
}

.pgo-tokushuu-mini img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.pgo-tokushuu-mini:hover {
	color: inherit;
	border-color: var(--pgo-yellow);
}

.pgo-tokushuu-mini strong {
	display: block;
	font-family: var(--font-display);
	font-size: 0.95rem;
	margin: 4px 0 2px;
}

.pgo-tokushuu-mini span:last-child {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.pgo-status-live {
	background: rgba(255, 203, 5, 0.2);
	color: var(--pgo-yellow);
}

.pgo-status-today {
	background: rgba(255, 0, 110, 0.18);
	color: #ff8ab8;
}

.pgo-status-soon {
	background: rgba(72, 202, 228, 0.18);
	color: #7ee0f5;
}

.pgo-status-upcoming {
	background: rgba(136, 136, 160, 0.18);
	color: var(--color-text-muted);
}

.pgo-status-ended {
	background: rgba(80, 80, 96, 0.25);
	color: var(--color-text-muted);
}

.pgo-tokushuu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.pgo-tokushuu-card {
	display: block;
	padding: 20px 20px 22px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
	color: inherit;
	transition: var(--transition);
	text-align: center;
}

.pgo-tokushuu-card-art {
	width: 140px;
	height: 140px;
	object-fit: contain;
	margin: 0 auto 8px;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}

.pgo-tokushuu-card-do {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 12px;
	color: var(--pgo-yellow);
	font-weight: 700;
}

.pgo-tokushuu-card:hover {
	color: inherit;
	transform: translateY(-2px);
	border-color: var(--pgo-yellow);
}

.pgo-tokushuu-card-icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 10px;
}

.pgo-tokushuu-card h2 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 10px 0 8px;
}

.pgo-tokushuu-empty {
	text-align: center;
	color: var(--color-text-muted);
	padding: 40px 16px;
}

.pgo-event-kicker {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.pgo-event-block {
	padding-top: 8px;
}

.pgo-event-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}

.pgo-event-phases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.pgo-event-phase {
	padding: 20px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
}

.pgo-event-phase h3,
.pgo-event-sub {
	font-family: var(--font-display);
	font-size: 1rem;
	margin-bottom: 6px;
}

.pgo-event-list {
	margin: 0;
	padding-left: 1.2em;
	color: var(--color-text-muted);
	line-height: 1.7;
}

.pgo-event-tips li {
	margin-bottom: 8px;
}

.pgo-event-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pgo-event-chips li {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 203, 5, 0.28);
	background: rgba(255, 203, 5, 0.08);
	font-weight: 600;
}

.pgo-event-rare {
	font-size: 0.9rem;
	color: var(--pgo-yellow);
}

.pgo-event-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.pgo-event-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.pgo-event-table th,
.pgo-event-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.pgo-event-table th {
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	background: rgba(255, 255, 255, 0.02);
}

.pgo-event-dl dt {
	font-family: var(--font-display);
	font-size: 0.9rem;
	margin-top: 12px;
}

.pgo-event-dl dd {
	margin: 4px 0 0;
	color: var(--color-text-muted);
	line-height: 1.6;
}

.pgo-event-source {
	text-align: center;
	padding: 0 24px 48px;
}

.pgo-event-page.theme-water .pgo-hero-bg {
	background:
		radial-gradient(ellipse at 30% 50%, rgba(72, 202, 228, 0.16) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 50%, rgba(59, 76, 202, 0.18) 0%, transparent 50%),
		linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
}

.pgo-event-page.theme-raid .pgo-hero-bg {
	background:
		radial-gradient(ellipse at 30% 50%, rgba(199, 125, 255, 0.16) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 50%, rgba(255, 203, 5, 0.1) 0%, transparent 50%),
		linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
}

.pgo-event-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: 12px 24px;
	padding: 48px 24px 28px;
}

.pgo-event-hero-copy {
	text-align: left;
	padding: 0;
}

.pgo-event-hero-copy .pgo-hero-desc {
	margin-left: 0;
	margin-right: 0;
	max-width: 36rem;
}

.pgo-event-hero-copy .pgo-hero-links,
.pgo-event-hero-copy .pgo-event-kicker {
	justify-content: flex-start;
}

.pgo-event-hero-art {
	display: flex;
	justify-content: center;
}

.pgo-event-hero-art img {
	width: min(320px, 100%);
	height: auto;
	filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4));
}

.pgo-event-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 1.25rem;
	margin-bottom: 16px;
}

.pgo-event-heading .pgo-ico {
	width: 1.4rem;
	height: 1.4rem;
	color: var(--pgo-yellow);
}

.pgo-today-block {
	padding-top: 0;
}

.pgo-today-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.pgo-today-step {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 18px 16px;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 203, 5, 0.28);
	background:
		linear-gradient(180deg, rgba(255, 203, 5, 0.08), rgba(255, 255, 255, 0.02));
}

.pgo-today-num {
	font-family: var(--font-display);
	font-size: 1.4rem;
	color: var(--pgo-yellow);
	min-width: 1.2em;
}

.pgo-today-ico .pgo-ico {
	width: 1.7rem;
	height: 1.7rem;
	color: var(--pgo-yellow);
}

.pgo-today-step strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1rem;
	margin-bottom: 2px;
}

.pgo-today-step div span {
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

.pgo-icon-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pgo-icon-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	line-height: 1.5;
}

.pgo-icon-list .pgo-ico {
	margin-top: 2px;
	color: var(--pgo-yellow);
}

.pgo-icon-list b {
	color: var(--color-text);
	margin-right: 4px;
}

.pgo-mon-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
}

.pgo-mon {
	margin: 0;
	width: 88px;
	text-align: center;
}

.pgo-mon img,
.pgo-mon-fallback {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
	background:
		radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.08), transparent 62%);
	border-radius: 16px;
}

.pgo-mon-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pgo-yellow);
}

.pgo-mon figcaption {
	margin-top: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
}

.pgo-mon-row-lg .pgo-mon {
	width: 120px;
}

.pgo-mon-row-lg .pgo-mon img,
.pgo-mon-row-lg .pgo-mon-fallback {
	width: 120px;
	height: 120px;
}

.pgo-mon-row-rare .pgo-mon img {
	box-shadow: 0 0 0 1px rgba(255, 203, 5, 0.35);
}

.pgo-move-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}

.pgo-move-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 8px;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
}

.pgo-move-card .pgo-ico {
	grid-row: 1 / span 2;
	color: var(--pgo-yellow);
	margin-top: 3px;
}

.pgo-move-card strong {
	font-size: 0.92rem;
}

.pgo-move-card span,
.pgo-move-card em {
	grid-column: 2;
	font-size: 0.78rem;
	font-style: normal;
	color: var(--color-text-muted);
}

@media (max-width: 900px) {
	.pgo-today-steps,
	.pgo-event-hero-grid {
		grid-template-columns: 1fr;
	}

	.pgo-event-hero-copy {
		text-align: center;
	}

	.pgo-event-hero-copy .pgo-hero-desc {
		margin-left: auto;
		margin-right: auto;
	}

	.pgo-event-hero-copy .pgo-hero-links,
	.pgo-event-hero-copy .pgo-event-kicker {
		justify-content: center;
	}

	.pgo-event-hero-art img {
		width: min(220px, 70vw);
	}
}

@media (max-width: 700px) {
	.pgo-tokushuu-banner {
		grid-template-columns: 1fr;
		padding: 22px;
	}

	.pgo-tokushuu-banner-icon,
	.pgo-tokushuu-banner-art {
		display: none;
	}

	.pgo-today-step {
		grid-template-columns: auto 1fr;
	}

	.pgo-today-ico {
		display: none;
	}
}

/* Pokémon GO raid invite board */
.pgo-raid-hero-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3em;
	margin-left: 8px;
	padding: 0 6px;
	border-radius: 999px;
	background: #1a1a2e;
	color: var(--pgo-yellow);
	font-size: 0.75rem;
}

.pgo-raid-live-count {
	margin: 0 0 16px;
	color: var(--pgo-yellow);
	font-weight: 700;
}

.pgo-raid-howto-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.pgo-raid-howto-card {
	padding: 22px 20px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
}

.pgo-raid-howto-card .pgo-ico {
	color: var(--pgo-yellow);
	margin-bottom: 8px;
}

.pgo-raid-howto-card h2 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 0 0 10px;
}

.pgo-raid-howto-card ol {
	margin: 0 0 0 1.1em;
	padding: 0;
	color: var(--color-text-muted);
	line-height: 1.6;
}

.pgo-raid-form,
.pgo-raid-modal-card form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pgo-raid-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.pgo-raid-bosses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
	gap: 10px;
}

.pgo-raid-boss {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 8px;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
	color: inherit;
	cursor: pointer;
	text-align: center;
}

.pgo-raid-boss img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.pgo-raid-boss strong {
	font-size: 0.78rem;
	line-height: 1.3;
}

.pgo-raid-boss span {
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.pgo-raid-boss.is-featured {
	border-color: rgba(255, 203, 5, 0.35);
}

.pgo-raid-boss.is-selected {
	border-color: var(--pgo-yellow);
	box-shadow: 0 0 0 1px var(--pgo-yellow);
}

.pgo-raid-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.pgo-raid-note-field,
.pgo-raid-custom-boss {
	grid-column: 1 / -1;
}

.pgo-raid-form label,
.pgo-raid-modal-card label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.pgo-raid-form input,
.pgo-raid-form select,
.pgo-raid-modal-card input {
	padding: 10px 12px;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-text);
}

.pgo-raid-form .btn,
.pgo-raid-modal-card .btn {
	align-self: flex-start;
}

.pgo-raid-host-note,
.pgo-raid-empty,
.pgo-raid-join-msg,
.pgo-raid-source {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.pgo-raid-list {
	display: grid;
	gap: 14px;
}

.pgo-raid-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	padding: 16px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
}

.pgo-raid-card.is-host {
	border-color: rgba(255, 203, 5, 0.4);
}

.pgo-raid-art {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pgo-raid-art img,
.pgo-raid-art-fallback {
	width: 88px;
	height: 88px;
	object-fit: contain;
}

.pgo-raid-art-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: rgba(255, 203, 5, 0.08);
	color: var(--pgo-yellow);
	font-size: 1.6rem;
}

.pgo-raid-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 6px;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.pgo-raid-body h3 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 0 0 6px;
}

.pgo-raid-host,
.pgo-raid-seats,
.pgo-raid-note {
	margin: 0 0 6px;
	color: var(--color-text-muted);
}

.pgo-raid-copy {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pgo-yellow);
	cursor: pointer;
	font: inherit;
}

.pgo-raid-joiners {
	margin: 8px 0;
	padding-left: 1.1em;
	color: var(--color-text-muted);
	font-size: 0.88rem;
}

.pgo-raid-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.pgo-raid-modal {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(6, 6, 12, 0.72);
}

.pgo-raid-modal[hidden] {
	display: none;
}

.pgo-raid-modal-card {
	position: relative;
	width: min(420px, 100%);
	padding: 24px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-bg-card);
}

.pgo-raid-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	font-size: 1.4rem;
	cursor: pointer;
}

@media (max-width: 700px) {
	.pgo-raid-howto-grid,
	.pgo-raid-fields,
	.pgo-raid-card {
		grid-template-columns: 1fr;
	}

	.pgo-raid-art {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------------ *
 * Horizontally scrollable charts: inward edge shadow + scrollbar hint *
 * ------------------------------------------------------------------ */
.looop-chart-layout {
	position: relative;
}

.looop-chart-layout::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 8px;
	right: 0;
	width: 34px;
	background: linear-gradient(to left, rgba(4, 6, 16, 0.85), rgba(4, 6, 16, 0));
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.18s ease;
	z-index: 3;
}

.looop-chart-layout[data-scroll-pos="start"]::after,
.looop-chart-layout[data-scroll-pos="middle"]::after {
	opacity: 1;
}

.looop-chart-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 245, 212, 0.5) transparent;
}

.looop-chart-scroll::-webkit-scrollbar {
	height: 6px;
}

.looop-chart-scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 245, 212, 0.5);
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.looop-chart-layout::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------- *
 * Device status colour coding (charging / discharging / inputting / idle) *
 * --------------------------------------------------------------------- */
[data-ecoflow-state="charging"] {
	--state-color: #00c853;
	--state-bg: rgba(0, 200, 83, 0.14);
	--state-border: rgba(0, 200, 83, 0.4);
}

[data-ecoflow-state="discharging"] {
	--state-color: #ff6b35;
	--state-bg: rgba(255, 107, 53, 0.14);
	--state-border: rgba(255, 107, 53, 0.4);
}

[data-ecoflow-state="inputting"] {
	--state-color: #3aa0ff;
	--state-bg: rgba(58, 160, 255, 0.14);
	--state-border: rgba(58, 160, 255, 0.4);
}

[data-ecoflow-state="idle"] {
	--state-color: #8b93a7;
	--state-bg: rgba(139, 147, 167, 0.14);
	--state-border: rgba(139, 147, 167, 0.4);
}

.ecoflow-stat-card strong[data-ecoflow-state] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--state-color, var(--color-text-muted));
	background: var(--state-bg, transparent);
	border: 1px solid var(--state-border, var(--color-border));
}

.ecoflow-stat-card strong[data-ecoflow-state]::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* Energy-flow diagram nodes already expose their live state as classes. */
.ecoflow-node.is-charging .ecoflow-node-state {
	color: #00c853;
	font-weight: 600;
}

.ecoflow-node.is-discharging .ecoflow-node-state {
	color: #ff6b35;
	font-weight: 600;
}

.ecoflow-node.is-standby .ecoflow-node-state {
	color: var(--color-text-muted);
}

/* EcoFlow / Tesla AI plan chart: right-edge scroll shadow on the swipeable plot. */
@media (max-width: 640px) {
	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-chart {
		position: relative;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-chart::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 42px;
		width: 30px;
		background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.18s ease;
		z-index: 3;
	}

	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-chart[data-scroll-pos="start"]::after,
	.ecoflow-plan:not(.ecoflow-cal) .ecoflow-rate-chart[data-scroll-pos="middle"]::after {
		opacity: 1;
	}

	.tesla-plan:not(.ecoflow-cal) .ecoflow-rate-chart::after {
		right: 38px;
		width: 36px;
		background: linear-gradient(
			to left,
			rgba(12, 10, 4, 0.92) 0%,
			rgba(212, 175, 55, 0.18) 42%,
			rgba(12, 10, 4, 0) 100%
		);
	}

	.tesla-plan:not(.ecoflow-cal) .ecoflow-rate-plot::-webkit-scrollbar {
		height: 6px;
	}

	.tesla-plan:not(.ecoflow-cal) .ecoflow-rate-plot::-webkit-scrollbar-thumb {
		background: rgba(212, 175, 55, 0.65);
		border-radius: 3px;
	}
}

/* Async dashboard shell: pulse until REST hydrate finishes. */
.ecoflow-dashboard.is-skeleton .ecoflow-plan-hud .ecoflow-rates-stat strong,
.ecoflow-dashboard.is-skeleton .ecoflow-stats-grid .ecoflow-stat-card strong,
.ecoflow-dashboard.is-skeleton .ecoflow-energy-flow-root,
.ecoflow-dashboard.is-skeleton .ecoflow-plan-chart {
	position: relative;
	color: transparent !important;
	border-color: transparent;
}

.ecoflow-dashboard.is-skeleton .ecoflow-plan-hud .ecoflow-rates-stat strong,
.ecoflow-dashboard.is-skeleton .ecoflow-stats-grid .ecoflow-stat-card strong {
	min-height: 1.15em;
	border-radius: 6px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.04) 0%,
		rgba(255, 255, 255, 0.1) 50%,
		rgba(255, 255, 255, 0.04) 100%
	);
	background-size: 200% 100%;
	animation: ecoflow-skeleton-pulse 1.2s ease-in-out infinite;
}

.ecoflow-dashboard.is-skeleton .ecoflow-energy-flow-root {
	min-height: 280px;
	border-radius: 12px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.03) 0%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0.03) 100%
	);
	background-size: 200% 100%;
	animation: ecoflow-skeleton-pulse 1.2s ease-in-out infinite;
}

.ecoflow-dashboard.is-skeleton .ecoflow-plan-note,
.ecoflow-dashboard.is-skeleton .ecoflow-plan-hud small,
.ecoflow-dashboard.is-skeleton .ecoflow-stat-card small {
	opacity: 0.35;
}

@keyframes ecoflow-skeleton-pulse {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecoflow-dashboard.is-skeleton .ecoflow-plan-hud .ecoflow-rates-stat strong,
	.ecoflow-dashboard.is-skeleton .ecoflow-stats-grid .ecoflow-stat-card strong,
	.ecoflow-dashboard.is-skeleton .ecoflow-energy-flow-root {
		animation: none;
	}
}