.cw {
	--ink: #173c44;
	--teal: #11695f;
	--muted: #536971;
	--line: #d7e5e3;
	--warn: #a35c00;
	--warn-bg: #fdf2e0;
	--bad: #9a3939;
	--bad-bg: #fbeaea;
	--good: #1c6b3a;
	--good-bg: #eaf6ee;
	max-width: 1000px;
	margin: 20px auto 40px;
	color: var(--ink);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
}
.cw * { box-sizing: border-box; }
.cw [hidden] { display: none !important; }

.cw-hero {
	position: relative;
	padding: 36px;
	border-radius: 24px;
	background: linear-gradient(120deg, #103f45, #126d60);
	color: #fff;
	overflow: hidden;
}
.cw-hero:after {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	right: -40px;
	top: 0;
	border: 45px solid #ffffff0c;
	border-radius: 50%;
	pointer-events: none;
}
.cw-hero h2 { font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 8px 0 10px; color: #fff; font-weight: 750; letter-spacing: -0.5px; }
.cw-hero p { margin: 0; color: #d5efdf; max-width: 60ch; }
.cw-eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: 750; }

.cw-panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 16px 18px;
	margin: 16px 0;
	box-shadow: 0 5px 20px #183d4408;
}
.cw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cw-or { color: var(--muted); font-size: 0.9em; }

.cw button {
	font: inherit;
	border: 1px solid #b9d4ce;
	border-radius: 10px;
	background: #f0f7f5;
	color: #184d48;
	padding: 9px 15px;
	min-height: 42px;
	font-weight: 650;
	cursor: pointer;
}
.cw button:hover { background: #deeee8; color: #133c36; }
.cw .cw-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.cw .cw-primary:hover { background: #0d554d; color: #fff; }
.cw-unit-toggle { margin-left: auto; min-width: 52px; }

.cw-search { position: relative; flex: 1 1 220px; min-width: 180px; }
.cw-search input {
	width: 100%;
	font: inherit;
	border: 1px solid #bccfcb;
	border-radius: 9px;
	padding: 9px 11px;
	min-height: 42px;
	background: #fff;
	color: var(--ink);
}
.cw-search-results {
	position: absolute;
	z-index: 5;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 8px 24px #183d4418;
}
.cw-search-results:empty { display: none; border: none; box-shadow: none; padding: 0; }
.cw-search-result {
	text-align: left;
	background: #f4f7f6;
	border: 1px solid var(--line);
	font-size: 14px;
	padding: 8px 10px;
	min-height: auto;
}
.cw-search-result:hover { background: #e4f0ec; }

.cw-status { font-size: 14px; color: var(--muted); min-height: 1.2em; margin: 6px 4px; }
.cw-status.cw-error { color: var(--bad); }

.cw-current {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 24px;
	margin: 16px 0;
	box-shadow: 0 5px 20px #183d4408;
}
.cw-current-icon { font-size: 56px; line-height: 1; }
.cw-current-main { min-width: 160px; }
.cw-current-place { font-size: 13px; color: var(--muted); margin: 0 0 2px; }
.cw-current-temp { font-size: 40px; font-weight: 750; margin: 0; color: var(--ink); }
.cw-current-desc { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.cw-current-stats {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 10px;
	min-width: 220px;
}
.cw-stat { text-align: center; }
.cw-stat strong { display: block; font-size: 16px; color: var(--ink); }
.cw-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

.cw-forecast {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}
.cw-day {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 16px 14px;
	text-align: center;
	box-shadow: 0 5px 20px #183d4408;
}
.cw-day-name { font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.cw-day-icon { font-size: 30px; margin: 4px 0; }
.cw-day-temps { font-size: 14px; margin: 4px 0; }
.cw-day-temps .cw-max { font-weight: 700; }
.cw-day-temps .cw-min { color: var(--muted); }
.cw-day-rain { font-size: 12px; color: var(--muted); margin: 4px 0; }
.cw-day-tag {
	display: inline-block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
}
.cw-tag-good { background: var(--good-bg); color: var(--good); }
.cw-tag-warn { background: var(--warn-bg); color: var(--warn); }
.cw-tag-bad { background: var(--bad-bg); color: var(--bad); }

.cw-attribution { font-size: 12px; color: var(--muted); margin: 16px 4px 0; }
.cw-attribution a { color: var(--teal); }

@media (max-width: 600px) {
	.cw-hero { padding: 24px 20px; }
	.cw-unit-toggle { margin-left: 0; }
	.cw-current { padding: 18px; }
}