.awx {
	--awx-accent: var(--ast-global-color-1, #4e6fbd);
	--awx-text: var(--ast-global-color-2, #101218);
	--awx-muted: var(--ast-global-color-7, #4b4f58);
	--awx-bg: var(--ast-global-color-4, #f3f5f5);
	--awx-card: var(--ast-global-color-5, #fff);
	max-width: 760px;
	margin: 0 auto 2em;
	padding: 1.5em;
	border-radius: 16px;
	background: var(--awx-bg);
	color: var(--awx-text);
}
.awx-title { margin: 0 0 1em; }

.awx-hero {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.25em;
	padding: 1.25em 1.5em;
	border-radius: 12px;
	color: #fff;
	background: linear-gradient(135deg, #4e6fbd, #2f4a8a);
}
.awx-hero.awx-cond-sun { background: linear-gradient(135deg, #3d8fd6, #4e6fbd); }
.awx-hero.awx-cond-partly { background: linear-gradient(135deg, #6a8cc7, #4e6fbd); }
.awx-hero.awx-cond-cloud { background: linear-gradient(135deg, #7d8899, #545e70); }
.awx-hero.awx-cond-rain { background: linear-gradient(135deg, #5b6b82, #34405a); }
.awx-hero.awx-cond-snow { background: linear-gradient(135deg, #8fa3bf, #5d7090); }
.awx-hero.awx-cond-night { background: linear-gradient(135deg, #1f2b4d, #101218); }

.awx-icon svg { width: 88px; height: 88px; display: block; }
.awx-sun circle { fill: #ffd34e; }
.awx-rays line { stroke: #ffd34e; stroke-width: 3.5; stroke-linecap: round; }
.awx-cloud { fill: #fff; }
.awx-moon { fill: #f4e9c1; }
.awx-drops line { stroke: #bfe0ff; stroke-width: 3; stroke-linecap: round; }
.awx-flakes circle { fill: #fff; }

.awx-temp { font-size: 3.2em; font-weight: 600; line-height: 1; }
.awx-temp span { font-size: .45em; font-weight: 400; margin-left: .1em; vertical-align: top; }
.awx-cond { font-size: 1.15em; margin-top: .3em; }
.awx-feels { opacity: .85; font-size: .9em; }

.awx-wind { display: flex; align-items: center; gap: .75em; }
.awx-compass { width: 84px; height: 84px; flex: none; }
.awx-ring { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.awx-ticks line { stroke: rgba(255, 255, 255, .6); stroke-width: 1.5; }
.awx-compass text { fill: #fff; font-size: 10px; text-anchor: middle; font-family: inherit; }
.awx-arrow { fill: #ffd34e; }
.awx-wind-text { display: flex; flex-direction: column; font-size: .9em; line-height: 1.35; }
.awx-wind-text strong { font-size: 1.25em; }

.awx-grid {
	list-style: none;
	margin: 1em 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75em;
}
.awx-grid li {
	margin: 0;
	padding: .9em 1em;
	border-radius: 10px;
	background: var(--awx-card);
	display: flex;
	flex-direction: column;
	gap: .2em;
}
.awx-label { hyphens: manual; font-size: .8em; color: var(--awx-muted); text-transform: uppercase; letter-spacing: .04em; }
.awx-value { font-size: 1.3em; font-weight: 600; }
.awx-sub { font-size: .85em; color: var(--awx-muted); }
.awx-bar { height: 6px; border-radius: 3px; background: var(--awx-bg); overflow: hidden; }
.awx-bar i { display: block; height: 100%; background: var(--awx-accent); }

.awx-uv { font-size: .6em; font-weight: 600; padding: .15em .5em; border-radius: 1em; vertical-align: middle; color: #fff; }
.awx-uv-low { background: #3a9d4a; }
.awx-uv-mid { background: #e0b400; color: #101218; }
.awx-uv-high { background: #ec7a1c; }
.awx-uv-vhigh { background: #d4322c; }
.awx-uv-extreme { background: #8a3fb8; }

.awx-meta { margin: 1em 0 0; font-size: .85em; color: var(--awx-muted); }
.awx-stale { color: #b5462b; }
.awx-empty { margin: 0; }

@media (max-width: 640px) {
	.awx { padding: 1em; }
	.awx-hero { grid-template-columns: auto 1fr; padding: 1em; }
	.awx-wind { grid-column: 1 / -1; }
	.awx-icon svg { width: 64px; height: 64px; }
	.awx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
	.awx-grid li { padding: .75em; }
	.awx-label { font-size: .7em; letter-spacing: .02em; }
	.awx-value { font-size: 1.15em; }
}