/* ==========================================================================
   Findeshy Energy — modern dashboard styles
   Self-contained (no external CSS dependency), responsive from ~320px
   phones up through desktop, with automatic dark-mode support.

   Modern CSS/HTML5 features used throughout, on purpose:
   - Native CSS nesting (no preprocessor needed)
   - clamp() for fluid type instead of a wall of breakpoint overrides
   - Container queries (@container) so the tile grid adapts to the card's
	 own width, not just the viewport — correct even inside a narrower
	 layout region
   - round() and mod() math functions (CSS Values & Units L4) for snapping
	 and a repeating stagger rhythm instead of hand-picked magic numbers
   - :is()/:where() and :has() for shorter, smarter selectors
   - accent-color + ::placeholder for consistent native form-control styling
   - native <dialog> + ::backdrop for the settings sheet (see index.php)
   ========================================================================== */

:root {
	--bg: #f3f5f9;
	--bg-elevated: #ffffff;
	--card: #ffffff;
	--card-border: #e6e9ef;
	--text: #101828;
	--text-muted: #64748b;
	--text-faint: #94a3b8;

	--primary: #0ea5b7;
	--primary-dark: #0b8494;
	--primary-contrast: #ffffff;

	--low: #16a34a;
	--low-bg: #e9f9ef;
	--mid: #d97706;
	--mid-bg: #fef3e0;
	--high: #dc2626;
	--high-bg: #fdecec;

	--charge-grad-start: #0ea5b7;
	--charge-grad-end: #16a34a;

	--radius-sm: round(10px, 2px);
	--radius-md: round(16px, 2px);
	--radius-lg: round(22px, 2px);
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--shadow-md: 0 8px 24px -12px rgba(16, 24, 40, 0.18);
	--focus-ring: 0 0 0 3px rgba(14, 165, 183, 0.35);

	accent-color: var(--primary);
	color-scheme: light;
}

/*
 * Dark palette applies in two situations:
 *  1) the OS/browser prefers dark AND the user hasn't explicitly picked
 *     "light" with the in-app toggle (:root:not([data-theme="light"])), or
 *  2) the user explicitly picked "dark" with the in-app toggle, regardless
 *     of what the OS prefers (:root[data-theme="dark"], below).
 * This lets the header sun/moon button always win over the system setting
 * in both directions, while still following the system by default.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0b1220;
		--bg-elevated: #101a2c;
		--card: #131f34;
		--card-border: #223049;
		--text: #eef2f8;
		--text-muted: #9fb0c9;
		--text-faint: #6b7c98;

		--low: #34d399;
		--low-bg: rgba(52, 211, 153, 0.14);
		--mid: #fbbf24;
		--mid-bg: rgba(251, 191, 36, 0.14);
		--high: #f87171;
		--high-bg: rgba(248, 113, 113, 0.14);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #0b1220;
	--bg-elevated: #101a2c;
	--card: #131f34;
	--card-border: #223049;
	--text: #eef2f8;
	--text-muted: #9fb0c9;
	--text-faint: #6b7c98;

	--low: #34d399;
	--low-bg: rgba(52, 211, 153, 0.14);
	--mid: #fbbf24;
	--mid-bg: rgba(251, 191, 36, 0.14);
	--high: #f87171;
	--high-bg: rgba(248, 113, 113, 0.14);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
	color-scheme: dark;
}

/* Smooth, non-jarring transition when the toggle switches theme. */
:is(body, .card, .icon-btn, .tile, .day-tab, .btn-ghost, .sheet, input, select) {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

:is(button, select, input) { font-family: inherit; }

::placeholder {
	color: var(--text-faint);
	opacity: 1;
}

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

.hidden { display: none !important; }
.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* Tiny layout utilities used inline in index.php instead of one-off
   style="" attributes — a single row of controls that wraps on narrow
   screens, per the "keep things on one line where it fits" brief. */
.row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.gap-sm { gap: 8px; }

/* ---------- Shell & topbar ---------- */

.app-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--card-border);

	.brand {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;

		.brand-mark {
			width: 36px;
			height: 36px;
			border-radius: 10px;
			background: linear-gradient(135deg, var(--charge-grad-start), var(--charge-grad-end));
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			box-shadow: var(--shadow-sm);

			svg { width: 20px; height: 20px; fill: #fff; }
		}

		.brand-text {
			display: flex;
			flex-direction: column;
			min-width: 0;
			line-height: 1.15;

			.brand-title {
				font-size: 15px;
				font-weight: 700;
				letter-spacing: -0.01em;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.brand-sub {
				font-size: 12px;
				color: var(--text-muted);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

.icon-btn {
	appearance: none;
	border: 1px solid var(--card-border);
	background: var(--card);
	color: var(--text);
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.15s ease, background 0.15s ease;

	&:hover { background: var(--bg); }
	&:active { transform: scale(0.95); }
	&:focus-visible { outline: none; box-shadow: var(--focus-ring); }
	svg { width: 20px; height: 20px; fill: currentColor; }
}

/* app.js toggles .is-dark on this button to match the currently active
   palette (system-detected or explicitly chosen), swapping the icon. */
.theme-toggle {
	.icon-sun { display: none; }
	.icon-moon { display: block; }
	&.is-dark .icon-sun { display: block; }
	&.is-dark .icon-moon { display: none; }
}

/* ---------- Layout ---------- */

.dashboard {
	flex: 1;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 16px 16px 48px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 20px;
	/* Lets children opt into container-query sizing (the tile grid below)
	   based on this card's own width rather than the viewport's. */
	container-type: inline-size;
}

.section-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin: 4px 2px 0;

	&.section-title--flush { margin: 0; }
	&.section-title--tight { margin: 0 0 4px; }
}

/* ---------- Day tabs ---------- */

.day-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	background: var(--bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 4px;
}

.day-tab {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 12px;
	border-radius: calc(var(--radius-md) - 4px);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;

	&.active {
		background: var(--card);
		color: var(--text);
		box-shadow: var(--shadow-sm);
	}

	&:focus-visible { outline: none; box-shadow: var(--focus-ring); }
}

/* ---------- Hero (current price) ---------- */

.hero-card {
	position: relative;
	overflow: hidden;
}

.hero-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.hero-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--low);
	box-shadow: 0 0 0 3px var(--low-bg);
}

.status-pill {
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;

	&.low { background: var(--low-bg); color: var(--low); }
	&.mid { background: var(--mid-bg); color: var(--mid); }
	&.high { background: var(--high-bg); color: var(--high); }
}

.hero-price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.hero-price {
	display: inline-block;
	font-size: clamp(40px, 9vw, 56px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.hero-unit {
	font-size: 15px;
	color: var(--text-muted);
	font-weight: 600;
}

.hero-meta {
	margin-top: 10px;
	font-size: 13px;
	color: var(--text-muted);
}

.hero-gauge {
	margin-top: 16px;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--low), var(--mid), var(--high));
	position: relative;
}

.hero-gauge-marker {
	position: absolute;
	top: -4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--card);
	border: 3px solid var(--text);
	transform: translateX(-50%);
	transition: left 0.4s ease;
	box-shadow: var(--shadow-sm);
}

.hero-gauge-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
	color: var(--text-faint);
}

.insight-line {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--text-muted);
}

.tile-detail {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	font-size: 13px;

	.tile-detail-badge {
		font-weight: 700;
		color: var(--text-muted);
	}
}

.publish-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mid);
	background: var(--mid-bg);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	margin-top: 14px;
}

/* ---------- EV charging recommendation ---------- */

.charge-card {
	background: linear-gradient(135deg, var(--charge-grad-start), var(--charge-grad-end));
	color: #fff;
	border: none;
	position: relative;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		right: -40px;
		top: -40px;
		width: 160px;
		height: 160px;
		background: rgba(255, 255, 255, 0.12);
		border-radius: 50%;
	}
}

.charge-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.charge-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;

	svg { width: 20px; height: 20px; fill: #fff; }
}

.duration-select {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 3px;
	position: relative;
	z-index: 1;
}

.duration-chip {
	appearance: none;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 999px;
	cursor: pointer;

	&.active {
		background: #fff;
		color: var(--primary-dark);
	}
}

.charge-window {
	display: block;
	margin-top: 16px;
	font-size: clamp(24px, 6vw, 30px);
	font-weight: 800;
	letter-spacing: -0.01em;
	position: relative;
	z-index: 1;
}

.charge-sub {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	position: relative;
	z-index: 1;
}

.charge-savings {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.16);
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 700;
	position: relative;
	z-index: 1;
}

/* ---------- Stats row ---------- */

.stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.stat-tile {
	padding: 14px;
	text-align: left;
}

.stat-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.stat-value {
	display: block;
	margin-top: 4px;
	font-size: 20px;
	font-weight: 800;

	&.low { color: var(--low); }
	&.high { color: var(--high); }
}

/* ---------- Tiles grid ---------- */

.tiles-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.res-toggle {
	display: flex;
	gap: 4px;
	background: var(--bg);
	border: 1px solid var(--card-border);
	border-radius: 999px;
	padding: 3px;
}

.res-chip {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 999px;
	cursor: pointer;

	&.active {
		background: var(--card);
		color: var(--text);
		box-shadow: var(--shadow-sm);
	}
}

.price-type-select {
	appearance: none;
	border: 1px solid var(--card-border);
	background: var(--bg);
	color: var(--text);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 10px;
	border-radius: 999px;
	cursor: pointer;
}

/* The new HTML5 <search> landmark wrapping the time filter — styled to sit
   flush with the tiles below it, on its own line. */
.tile-search {
	display: block;
	margin-top: 10px;

	input[type="search"] {
		width: 100%;
		appearance: none;
		border: 1px solid var(--card-border);
		background: var(--bg);
		color: var(--text);
		font-size: 13px;
		padding: 9px 12px;
		border-radius: var(--radius-sm);

		&:focus-visible {
			outline: none;
			box-shadow: var(--focus-ring);
			border-color: var(--primary);
		}
	}
}

/* A subtle cue that a filter is active, using :has() to reach up from the
   input into its containing card — no JS class-toggling needed for this. */
.card:has(#tileFilterInput:not(:placeholder-shown)) {
	border-color: var(--primary);
}

.tiles-grid {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: 6px;
	container-type: inline-size;
}

/* 15-minute view (96 tiles instead of 24) — slightly narrower cells and
   smaller type so a full day still fits without overwhelming scrolling.
   Falls back to the media-query sizing above on browsers without container
   query support; @container refines it once the card itself is wide. */
.tiles-grid.tiles-grid--dense {
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 4px;

	.tile { padding: 6px 2px; }
	.tile-time { font-size: 9px; }
	.tile-price { font-size: 11px; }
}

@container (min-width: 480px) {
	.tiles-grid.tiles-grid--dense { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

.tile {
	border-radius: var(--radius-sm);
	background: var(--low-bg);
	color: var(--text);
	padding: 8px 4px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	position: relative;
	cursor: default;
	/* Staggered fade-in: mod() repeats the 0-7 delay rhythm across all 96
	   tiles instead of a single unbroken ramp that would make the last row
	   visibly lag behind the first by over a second. */
	animation: tile-in 0.28s ease backwards;
	animation-delay: calc(mod(var(--i, 0), 8) * 35ms);

	&.mid { background: var(--mid-bg); }
	&.high { background: var(--high-bg); }

	&.now {
		outline: 2px solid var(--text);
		outline-offset: -2px;
	}

	&:is(:hover, :focus-visible) {
		transform: translateY(-1px);
		box-shadow: var(--shadow-sm);
		outline: 2px solid var(--primary);
		outline-offset: -2px;
	}
	&:focus-visible { outline-style: dashed; }

	&.best::before {
		content: "⚡";
		position: absolute;
		top: -6px;
		right: -2px;
		font-size: 10px;
	}
}

@keyframes tile-in {
	from { opacity: 0; transform: translateY(3px); }
	to { opacity: 1; transform: translateY(0); }
}

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

.tile-time {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--text-muted);
}

.tile-price {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
}

.tiles-legend {
	display: flex;
	gap: 14px;
	margin-top: 12px;
	font-size: 11.5px;
	color: var(--text-muted);
	flex-wrap: wrap;
}

.legend-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;

	&.low { background: var(--low); }
	&.mid { background: var(--mid); }
	&.high { background: var(--high); }
}

/* ---------- Details (chart + table), collapsible ---------- */

.details-section {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	overflow: hidden;

	> summary {
		list-style: none;
		cursor: pointer;
		padding: 16px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 700;
		font-size: 14px;

		&::-webkit-details-marker { display: none; }

		.chevron {
			transition: transform 0.2s ease;
			color: var(--text-muted);
		}
	}

	&[open] > summary .chevron { transform: rotate(180deg); }
}

.details-body {
	padding: 0 20px 20px;
}

.chart-wrapper {
	position: relative;
	width: 100%;
	height: 220px;
}

.chart-tooltip {
	position: absolute;
	background: var(--text);
	color: var(--bg-elevated);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 8px;
	pointer-events: none;
	white-space: nowrap;
	z-index: 5;
}

.chart-grid-line { stroke: var(--card-border); stroke-width: 1; }
.chart-axis-text { fill: var(--text-faint); font-size: 10px; }
.chart-area { fill: color-mix(in srgb, var(--primary) 18%, transparent); stroke: none; }
.chart-line { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.scrubber-line { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.scrubber-circle { fill: var(--primary); stroke: var(--card); stroke-width: 2; }

.table-scroll {
	margin-top: 16px;
	overflow-x: auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--card-border);
}

table.price-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 560px;

	th {
		text-align: left;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--text-muted);
		background: var(--bg);
		padding: 10px 12px;
		position: sticky;
		top: 0;
	}

	td {
		padding: 9px 12px;
		border-top: 1px solid var(--card-border);
		white-space: nowrap;
	}

	tr.now-row td { background: var(--low-bg); font-weight: 700; }
}

.utility-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.btn-ghost {
	appearance: none;
	border: 1px solid var(--card-border);
	background: var(--bg);
	color: var(--text);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;

	&:hover { background: var(--card-border); }
	&.danger { color: var(--high); }
}

/* ---------- Production mix card ---------- */

.mix-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.mix-breakdown {
	font-size: 13px;
	color: var(--text-muted);

	strong { color: var(--text); }
}

.mix-center {
	display: inline-block;
	font-size: 22px;
	font-weight: 800;
	color: var(--low);
}

/* ---------- Settings sheet, as a native <dialog> ---------- */

.sheet {
	background: var(--card);
	color: var(--text);
	border: none;
	width: 100%;
	max-width: 480px;
	border-radius: 20px 20px 0 0;
	padding: 8px 20px 24px;
	box-shadow: var(--shadow-md);
	max-height: round(down, 88vh, 4px);
	overflow-y: auto;
	/* <dialog> is display:none until shown; showModal() switches this to
	   flex via the [open] state so the sheet can be vertically centered
	   on wider screens without an extra wrapper element. */
	margin: auto auto 0;

	&::backdrop {
		background: rgba(15, 23, 42, 0.45);
		backdrop-filter: blur(2px);
	}

	&[open] {
		display: flex;
		flex-direction: column;
		animation: sheet-in 0.2s ease;
	}
}

@keyframes sheet-in {
	from { transform: translateY(16px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 640px) {
	.sheet { border-radius: var(--radius-lg); margin: auto; }
}

.sheet-handle {
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: var(--card-border);
	margin: 8px auto 14px;
}

.sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;

	h2 { font-size: 17px; margin: 0; }
}

.field-group {
	margin-bottom: 16px;

	label {
		display: block;
		font-size: 12.5px;
		font-weight: 700;
		color: var(--text-muted);
		margin-bottom: 6px;
	}

	select {
		width: 100%;
		appearance: none;
		border: 1px solid var(--card-border);
		background: var(--bg);
		color: var(--text);
		font-size: 14px;
		padding: 11px 14px;
		border-radius: var(--radius-sm);
	}
}

.btn-primary {
	appearance: none;
	border: none;
	width: 100%;
	background: var(--primary);
	color: var(--primary-contrast);
	font-size: 15px;
	font-weight: 700;
	padding: 13px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	margin-top: 6px;

	&:active { transform: scale(0.99); }
}

/* ---------- Responsive: tablet / desktop ---------- */

@media (min-width: 720px) {
	.dashboard { padding: 24px 24px 56px; gap: 20px; }
	.top-row {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: 20px;
		align-items: stretch;
	}
	.tiles-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

@media (min-width: 1000px) {
	.dashboard { max-width: 1040px; }
}