* {
	font-weight: normal;
}

/* Heat map horizontal scrollbar */
.heatmap-container {
	overflow-x: auto;
	scrollbar-width: thin;
	transition: background 1s ease;
	scrollbar-color: var(--accent) var(--surface-2);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
	transition: background 1s ease;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--surface-2);
	border-radius: 20px;
	transition: background 1s ease;
	margin: 4px;
}

::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 20px;
	transition: background 1s ease;
	border: 2px solid var(--surface-2);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
	transition: background 1s ease;
}

:root {
	--bg: #f0eee8;

	--surface: #f9f7f2;

	--surface-2: #e7e4dc;

	--ink: #292925;

	--ink-soft: #77746d;

	--accent: #d96b3f;

	--accent-2: #478f7d;

	--border: #d3cec3;

	--shadow: 6px 6px 0 rgba(22, 22, 22, 0.06);
}

html[data-theme='dark'] {
	--bg: #20211f;

	--surface: #292a27;

	--surface-2: #32332f;

	--ink: #e5e1d8;

	--ink-soft: #a6a197;

	--accent: #d9825b;

	--accent-2: #79a895;

	--border: #41413b;

	--shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
}

* {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;

		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;

	min-height: 100vh;

	padding: 0;

	background-color: var(--bg);

	background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);

	background-size: 18px 18px;

	color: var(--ink);

	font-family: 'Inter', sans-serif;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.page {
	max-width: 1180px;

	margin: 0 auto;

	padding: 42px 28px 90px;
}

.topbar {
	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 28px;

	padding: 20px 24px 28px;

	margin-bottom: 18px;

	border-left: 10px solid var(--accent);

	border-bottom: 2px solid var(--ink);

	background: var(--surface);
}

.brand .eyebrow,
.brand .reyebrow {
	font-family: 'Space Mono', monospace;

	font-size: 12;

	font-weight: 700;

	letter-spacing: 0.22em;

	text-transform: uppercase;

	color: var(--accent);
}

h1 {
	max-width: 760px;

	margin: 8px 0 6px;

	font-family: 'Fraunces', serif;

	font-size: clamp(38px, 7vw, 72px);

	font-weight: 600;

	line-height: 0.92;

	letter-spacing: -0.045em;
}

.subhead {
	max-width: 590px;

	margin: 14px 0 0;

	color: var(--ink-soft);

	font-size: 14px;

	line-height: 1.55;
}

.topbar-actions {
	display: flex;

	align-items: center;

	flex-shrink: 0;
}

.theme-toggle {
	min-width: 96px;

	height: 42px;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 9px;

	border: 2px solid var(--ink);

	border-radius: 0;

	background: var(--surface-2);

	color: var(--ink);

	font-family: 'Space Mono', monospace;

	font-size: 10px;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	cursor: pointer;

	box-shadow: 3px 2px 0 var(--ink);
}

.theme-toggle:active {
	transform: translate(3px, 3px);

	box-shadow: 1px 1px 0 var(--ink);
}

.theme-toggle .dot {
	width: 9px;

	height: 9px;

	border-radius: 50%;

	background: var(--accent);
}

.modes {
	width: fit-content;

	display: flex;

	gap: 0;

	margin: 26px 0 18px;

	border: 2px solid var(--ink);

	background: var(--ink);
}

.mode-btn {
	min-width: 170px;

	padding: 13px 20px;

	border: 0;

	background: var(--surface);

	color: var(--ink);

	font-family: 'Space Mono', monospace;

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.07em;

	text-transform: uppercase;

	cursor: pointer;
}

.mode-btn + .mode-btn {
	border-left: 2px solid var(--ink);
}

.mode-btn.active {
	background: var(--accent);

	color: #fff;
}

.mode-btn:focus-visible,
.theme-toggle:focus-visible,
button:focus-visible,
.tab:focus-visible,
input:focus-visible {
	outline: 1px solid var(--accent-2);

	outline-offset: 3px;
}

.layout {
	display: grid;

	grid-template-columns: 340px minmax(0, 1fr);

	gap: 22px;

	align-items: start;
}

@media (max-width: 880px) {
	.layout {
		grid-template-columns: 1fr;
	}
}

.card {
	margin-bottom: 20px;

	padding: 22px;

	border: 2px solid var(--ink);

	border-radius: 0;

	background: var(--surface);

	box-shadow: var(--shadow);
}

.sidebar {
	display: flex;

	flex-direction: column;

	gap: 2px;

	position: sticky;

	top: 24px;
}

.panel {
	display: none;
}

.panel.active {
	display: block;
}

label {
	display: block;

	margin-bottom: 7px;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 10px;

	letter-spacing: 0.09em;

	text-transform: uppercase;
}

.controls {
	display: none;

	margin-bottom: 20px;
}

.row {
	display: flex;

	gap: 8px;

	margin-bottom: 8px;
}

.row:last-child {
	margin-bottom: 0;
}

.tab {
	flex: 1;

	padding: 11px 8px;

	border: 1px solid var(--border);

	border-radius: 0;

	background: transparent;

	color: var(--ink);

	font-family: 'Space Mono', monospace;

	font-size: 10px;

	letter-spacing: 0.02em;

	text-align: center;

	text-transform: uppercase;

	cursor: pointer;
}

.tab:hover {
	border-color: var(--ink);
}

.tab.active {
	border-color: var(--ink);

	background: var(--ink);

	color: var(--bg);
}

.tab.type-tab.active,
.tab.preset-tab.active {
	border-color: var(--accent);

	background: var(--accent);

	color: #fff;
}

input[type='text'] {
	width: 100%;

	margin-bottom: 14px;

	padding: 12px 13px;

	border: 1px solid var(--ink);

	border-radius: 0;

	background: var(--bg);

	color: var(--ink);

	font-family: 'Space Mono', monospace;

	font-size: 12px;
}

.dropzone {
	margin-bottom: 15px;

	padding: 32px 16px;

	border: 2px dashed var(--border);

	border-radius: 0;

	background: var(--bg);

	text-align: center;

	cursor: pointer;

	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.dropzone.drag {
	border-color: var(--accent);

	background: var(--surface-2);
}

.dropzone p {
	margin: 0;

	color: var(--ink-soft);

	font-size: 12px;

	line-height: 1.65;
}

.dropzone strong {
	display: block;

	margin-bottom: 4px;

	color: var(--ink);

	font-family: 'Fraunces', serif;

	font-size: 20px;
}

input[type='file'] {
	display: none;
}

.privacy-note,
.note {
	font-family: 'Space Mono', monospace;

	font-size: 0.95rem !important;

	color: var(--ink-soft);

	line-height: 1.65;
}

.progress {
	display: none;

	margin-top: 15px;

	color: var(--accent);

	font-family: 'Space Mono', monospace;

	font-size: 11px;
}

button.primary {
	width: 100%;

	padding: 16px 20px;

	border: 2px solid var(--ink);

	border-radius: 0;

	background: var(--ink);

	color: var(--bg);

	font-family: 'Space Mono', monospace;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.06em;

	text-transform: uppercase;

	cursor: pointer;
}

button.primary:hover,
button.apply-btn:hover {
	background: var(--accent);

	border-color: var(--accent);
}

html[data-theme='dark'] button.primary {
	color: var(--surface);
}

.date-row {
	display: flex;

	align-items: center;

	gap: 8px;

	margin-top: 10px;
}

.date-row:first-of-type {
	margin-top: 14px;
}

input[type='date'] {
	flex: 1;

	width: 100%;

	min-width: 0;

	padding: 12px 10px;

	border: 1px solid var(--border);

	border-radius: 0;

	background: var(--bg);

	color: var(--ink);

	font-family: 'Space Mono', monospace;

	font-size: 11px;

	color-scheme: light;
}

html[data-theme='dark'] input[type='date'] {
	color-scheme: dark;
}

.date-sep {
	flex-shrink: 0;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 11px;
}

button.apply-btn {
	width: 100%;

	padding: 13px 18px;

	border: 2px solid var(--ink);

	border-radius: 0;

	background: var(--ink);

	color: var(--bg);

	font-family: 'Space Mono', monospace;

	font-size: 10px;

	letter-spacing: 0.05em;

	text-transform: uppercase;

	cursor: pointer;
}

html[data-theme='dark'] button.apply-btn {
	color: var(--surface);
}

.error {
	display: none;

	margin-bottom: 15px;

	padding: 10px 12px;

	border-left: 4px solid var(--accent);

	background: var(--surface-2);

	color: var(--accent-2);

	font-family: 'Space Mono', monospace;

	font-size: 11px;
}

.stamp {
	display: none;

	width: fit-content;

	margin-bottom: 15px;

	padding: 4px 8px;

	border: 1px solid var(--accent);

	color: var(--accent);

	font-family: 'Space Mono', monospace;

	font-size: 9px;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}

.bigstat {
	display: none;

	padding: 4px 0 8px;

	margin-bottom: 15px;
}

.bigstat .num {
	font-family: 'Fraunces', serif;

	font-size: clamp(36px, 6vw, 62px);

	font-weight: 700;

	line-height: 0.9;
}

.bigstat .lbl {
	margin-top: 8px;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 9px;

	letter-spacing: 0.14em;

	text-transform: uppercase;
}

.bigstat .sub {
	margin-top: 10px;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 10px;
}

.search-wrap {
	display: none;

	margin-bottom: 15px;
}

.search-result {
	margin-top: 4px;

	padding: 10px 12px;

	border-left: 3px solid var(--accent-2);

	background: var(--surface-2);

	font-family: 'Space Mono', monospace;

	font-size: 11px;
}

.section-title {
	display: none;

	margin: 28px 0 14px;

	padding-bottom: 8px;

	border-bottom: 1px solid var(--border);

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 10px;

	letter-spacing: 0.12em;

	text-transform: uppercase;
}

.section-title:first-of-type {
	margin-top: 0;
}

.grid {
	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

	gap: 12px;
}

.item {
	display: flex;

	align-items: center;

	gap: 12px;

	margin: 0;

	padding: 13px;

	border: 1px solid var(--border);

	border-left: 5px solid transparent;

	border-radius: 0;

	background: var(--surface);

	transition:
		transform 0.15s ease,
		border-color 0.15s ease;
}

.item:hover {
	transform: translateX(4px);

	border-left-color: var(--accent);
}

.rank {
	width: 24px;

	flex-shrink: 0;

	color: var(--ink-soft);

	font-family: 'Fraunces', serif;

	font-size: 20px;
}

.art {
	width: 48px;

	height: 48px;

	flex-shrink: 0;

	border-radius: 50%;

	background: var(--surface-2);

	object-fit: cover;
}

.meta {
	flex: 1;

	min-width: 0;
}

.name {
	font-family: 'Fraunces', serif;

	font-size: 16px;

	font-weight: 600;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;
}

.sub {
	margin-top: 2px;

	color: var(--ink-soft);

	font-size: 10.5px;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;
}

.affinity {
	width: 70px;

	flex-shrink: 0;

	text-align: right;
}

.affinity-num {
	display: block;

	margin-bottom: 5px;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 9px;
}

.bar-track {
	width: 100%;

	height: 5px;

	background: var(--surface-2);
}

.bar-fill {
	height: 100%;

	background: var(--accent);
}

.years {
	display: flex;

	flex-direction: column;

	gap: 9px;
}

.year-row {
	display: flex;

	align-items: center;

	gap: 12px;
}

.year-label {
	width: 42px;

	flex-shrink: 0;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 10px;
}

.year-bar-track {
	flex: 1;

	height: 14px;

	overflow: hidden;

	background: var(--surface-2);
}

.year-bar-fill {
	height: 100%;

	background: var(--ink);
}

.year-val {
	width: 74px;

	flex-shrink: 0;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 10px;

	text-align: right;
}

.results-tabs {
	display: flex;
	gap: 0;
	width: fit-content;
	margin: 0 0 18px;
	border: 2px solid var(--ink);
	background: var(--ink);
}

.results-tab {
	padding: 12px 18px;
	border: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.results-tab + .results-tab {
	border-left: 2px solid var(--ink);
}

.results-tab.active {
	background: var(--accent);
	color: #fff;
}

.patterns-panel {
	display: none;
}

.results.patterns-view .patterns-panel {
	display: block;
}

.results.patterns-view [data-view-section='overview'] {
	display: none !important;
}

.pattern-intro {
	margin: 0 0 16px;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.6;
}

.pattern-highlights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 26px;
}

.pattern-card {
	min-width: 0;
	padding: 18px;
	border: 2px solid var(--ink);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.pattern-card .pattern-label {
	color: var(--ink-soft);
	font-family: 'Space Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pattern-card .pattern-value {
	margin: 12px 0 6px;
	font-family: 'Fraunces', serif;
	font-size: clamp(25px, 3vw, 27px);
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.pattern-card .pattern-detail {
	color: var(--ink-soft);
	font-family: 'Space Mono', monospace;
	font-size: 16px;
	line-height: 1.5;
}

.pattern-section {
	margin: 24px 0;
}

.pattern-section h3 {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
	color: var(--ink-soft);
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pattern-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pattern-row {
	display: grid;
	grid-template-columns: minmax(105px, 1fr) minmax(70px, 2fr) 82px;
	align-items: center;
	gap: 12px;
	font-size: 11px;
}

.pattern-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pattern-track {
	height: 9px;
	background: var(--surface-2);
}

.pattern-fill {
	height: 100%;
	background: var(--accent);
}

.pattern-time {
	color: var(--ink-soft);
	font-family: 'Space Mono', monospace;
	font-size: 9px;
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 680px) {
	.pattern-highlights {
		grid-template-columns: 1fr;
	}

	.results-tabs {
		width: 100%;
	}

	.results-tab {
		flex: 1;
		padding-inline: 8px;
	}

	.pattern-row {
		grid-template-columns: minmax(90px, 1fr) minmax(50px, 1.3fr) 70px;
		gap: 8px;
	}
}

.explanation-panel {
	display: none;
	max-width: 820px;
}

.explanation-panel.active {
	display: block;
}

.explanation-card {
	padding: clamp(22px, 4vw, 34px);
	border: 2px solid var(--ink);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.explanation-card h2 {
	margin: 0 0 10px;
	font-family: 'Fraunces', serif;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.05;
}

.explanation-card h3 {
	margin: 26px 0 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
	color: var(--accent);
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.explanation-card p,
.explanation-card li {
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.75;
}

.explanation-card ol {
	padding-left: 22px;
	margin: 10px 0;
}

.explanation-card li {
	padding-left: 4px;
	margin: 8px 0;
}

.explanation-card strong {
	color: var(--ink);
}

.explanation-card a {
	color: var(--accent-2);
	font-weight: 600;
	text-underline-offset: 3px;
}

.explanation-callout {
	margin-top: 18px;
	padding: 14px 16px;
	border-left: 4px solid var(--accent);
	background: var(--surface-2);
}

.explanation-callout p {
	margin: 0;
}

.layout.explanation-mode {
	grid-template-columns: 1fr;
}

.layout.explanation-mode .sidebar {
	display: none;
}

.placeholder {
	grid-column: 1 / -1;

	padding: 50px 10px;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 11px;

	text-align: center;
}

.foot-row {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 16px;

	margin-top: 24px;

	padding-top: 18px;

	border-top: 2px solid var(--ink);
}

.disconnect {
	border: 0;

	background: none;

	color: var(--ink-soft);

	font-family: 'Space Mono', monospace;

	font-size: 9px;

	letter-spacing: 0.06em;

	text-decoration: underline;

	text-transform: uppercase;

	cursor: pointer;

	display: none;
}

.note {
	margin: 0;
}

@media (max-width: 680px) {
	.page {
		padding: 18px 14px 60px;
	}

	.topbar {
		align-items: flex-start;

		padding: 16px 16px 22px;

		border-left-width: 7px;
	}

	.topbar-actions {
		margin-top: 2px;
	}

	.theme-toggle {
		min-width: 42px;

		width: 42px;

		padding: 0;

		box-shadow: 3px 3px 0 var(--ink);
	}

	#themeLabel {
		display: none;
	}

	h1 {
		font-size: 40px;
	}

	.subhead {
		font-size: 15px;
	}

	.modes {
		width: 100%;
	}

	.mode-btn {
		min-width: 0;

		flex: 1;

		padding-inline: 10px;
	}

	.sidebar {
		position: static;
	}

	.card {
		box-shadow: 5px 5px 0 rgba(22, 22, 22, 0.1);
	}
}

/* ===== ADDED: new features (existing rules above are untouched) ===== */
.results:not([data-view='overview']) [data-view-section='overview'] {
	display: none !important;
}

.view-panel {
	display: none;
}

.results[data-view='taste'] #tastePanel,
.results[data-view='compare'] #comparePanel,
.results[data-view='records'] #recordsPanel {
	display: block;
}

.results-tabs {
	max-width: 100%;
	overflow-x: auto;
}

.results-tab {
	white-space: nowrap;
}

.topn-btn {
	padding: 12px 18px;
	border: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.topn-btn + .topn-btn {
	border-left: 2px solid var(--ink);
}

.topn-btn.active {
	background: var(--accent);
	color: #fff;
}

.hm-year {
	margin: 14px 0 6px;
	font-family: 'Fraunces', serif;
	font-size: 18px;
}

.hm-scroll {
	overflow-x: auto;
	padding-bottom: 6px;
}

.hm-months {
	position: relative;
	height: 14px;
	color: var(--ink-soft);
	font-family: 'Space Mono', monospace;
	font-size: 9px;
}

.hm-months span {
	position: absolute;
	top: 0;
}

.hm-grid {
	display: grid;
	grid-template-rows: repeat(7, 12px);
	grid-auto-flow: column;
	grid-auto-columns: 12px;
	gap: 3px;
}

.hm-c {
	display: block;
	width: 12px;
	height: 12px;
	background: var(--surface-2);
	border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.hm-1 {
	background: color-mix(in srgb, var(--accent) 25%, var(--surface-2));
}

.hm-2 {
	background: color-mix(in srgb, var(--accent) 50%, var(--surface-2));
}

.hm-3 {
	background: color-mix(in srgb, var(--accent) 75%, var(--surface-2));
}

.hm-4 {
	background: var(--accent);
}

.hm-e {
	visibility: hidden;
}

.hm-legend {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 10px;
	color: var(--ink-soft);
	font-family: 'Space Mono', monospace;
	font-size: 9px;
}

.hm-legend .hm-c {
	display: inline-block;
}

.dom-bar {
	display: flex;
	height: 22px;
	margin-bottom: 14px;
	border: 2px solid var(--ink);
}

.dom-bar span {
	display: block;
	height: 100%;
}

.dom-sw {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
}

.disc-scroll {
	max-height: 560px;
	overflow-y: auto;
	padding-right: 6px;
}

.tl-item {
	margin-bottom: 8px;
	padding: 10px 12px;
	border-left: 3px solid var(--accent);
	background: var(--surface);
}

.cmp-controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 14px;
}

.cmp-controls select {
	width: 100%;
	padding: 12px 10px;
	border: 1px solid var(--border);
	border-radius: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Space Mono', monospace;
	font-size: 11px;
}

.cmp-table {
	margin-top: 18px;
	border: 2px solid var(--ink);
	background: var(--surface);
}

.cmp-row {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1.4fr 70px;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	font-size: 12px;
}

.cmp-row > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cmp-row.head {
	color: var(--ink-soft);
	font-family: 'Space Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cmp-up {
	color: var(--accent-2);
}

.cmp-down {
	color: var(--accent);
}

@media (max-width: 680px) {
	.cmp-controls {
		grid-template-columns: 1fr;
	}

	.cmp-row {
		font-size: 11px;
		gap: 6px;
		grid-template-columns: 0.9fr 1.3fr 1.3fr 52px;
	}
}

/* ===== ADDED: colour theme picker ===== */
.topbar-actions {
	gap: 16px;
}

.palette-picker {
	display: flex;
	gap: 8px;
	align-items: center;
}

.swatch {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid var(--ink);
	border-radius: 0;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--ink);
}

.swatch:hover {
	transform: translate(-1px, -1px);
}

@media (max-width: 680px) {
	.topbar,
	.topbar-actions {
		flex-wrap: wrap;
	}

	.palette-picker {
		gap: 6px;
	}
}

/* ===== RESTYLE v3: dark app look, rounded, pill buttons ===== */
body {
	background-image: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
}
h1,
h2,
h3,
.name,
.rank,
.hm-year,
.bigstat .num,
.dropzone strong,
.pattern-card .pattern-value,
.explanation-card h2 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
}
h1 {
	font-size: clamp(32px, 5.5vw, 56px);
	line-height: 1.05;
	margin: 6px 0;
}
h2 {
	font-size: 16px;
	font-weight: 500;
	margin: 4px 0;
	color: var(--ink-soft);
	letter-spacing: 0;
}

.brand .eyebrow,
.reyebrow,
label,
.section-title,
.pattern-section h3,
.stamp,
.mode-btn,
.results-tab,
.topn-btn,
.tab,
button.primary,
button.apply-btn,
.theme-toggle,
.pattern-card .pattern-label,
.cmp-row.head,
.explanation-card h3,
.disconnect,
.privacy-note,
.note,
.progress,
.error,
.search-result,
.bigstat .lbl,
.bigstat .sub,
.year-label,
.year-val,
.pattern-time,
.date-sep,
.affinity-num,
.placeholder,
.hm-months,
.hm-legend,
.pattern-card .pattern-detail,
input,
select {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-transform: none;
	letter-spacing: 0;
}
.brand .eyebrow,
.reyebrow {
	font-size: 12px;
	font-weight: 700;
}

label {
	font-size: 12px;
	font-weight: 700;
}
.privacy-note,
.note,
.progress,
.error,
.search-result,
.bigstat .lbl,
.bigstat .sub,
.year-label,
.year-val,
.pattern-time,
.date-sep,
.affinity-num {
	font-size: 12px;
	font-weight: 400;
}
.subhead {
	font-size: 14px;
	font-weight: 400;
}

.topbar {
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%, var(--surface) 100%);
	padding: 28px 28px 24px;
}

.card,
.pattern-card,
.explanation-card,
.cmp-table {
	border: 0;
	border-radius: 10px;
	box-shadow: none !important;
}
.card,
.pattern-card,
.explanation-card {
	background: var(--surface);
}
.dom-bar {
	border: 0;
	border-radius: 999px;
	overflow: hidden;
}

.modes,
.results-tabs {
	border: 0;
	background: transparent;
	gap: 8px;
	flex-wrap: wrap;
}
.mode-btn,
.results-tab,
.topn-btn {
	min-width: 0;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	border: 0;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink);
}
.mode-btn + .mode-btn,
.results-tab + .results-tab,
.topn-btn + .topn-btn {
	border-left: 0;
}
.mode-btn:hover,
.results-tab:hover,
.topn-btn:hover {
	background: var(--border);
}
.mode-btn.active,
.results-tab.active,
.topn-btn.active {
	background: var(--ink);
	color: var(--bg);
}

.theme-toggle {
	border: 0;
	border-radius: 999px;
	background: var(--surface-2);
	box-shadow: none;
	font-size: 12px;
	font-weight: 700;
	height: 36px;
}
.theme-toggle:active {
	transform: scale(0.97);
	box-shadow: none;
}
.swatch {
	border: 0;
	border-radius: 50%;
	box-shadow: none;
}
.swatch.active {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.swatch:hover {
	transform: scale(1.1);
}

.tab {
	border: 0;
	border-radius: 999px;
	background: var(--surface-2);
	font-size: 12px;
	font-weight: 700;
	padding: 9px 8px;
}
.tab:hover {
	background: var(--border);
}
.tab.active {
	background: var(--ink);
	color: var(--bg);
}
.tab.type-tab.active,
.tab.preset-tab.active {
	background: var(--accent);
	color: #000;
}

input[type='text'],
input[type='date'],
.cmp-controls select {
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--surface-2);
	font-size: 13px;
	font-weight: 400;
}
input[type='text']:focus,
input[type='date']:focus {
	border-color: var(--ink);
	outline: none;
}
.dropzone {
	border: 2px dashed var(--border);
	border-radius: 10px;
	background: transparent;
}
.dropzone:hover {
	border-color: var(--accent);
}
.dropzone strong {
	font-size: 18px;
}
.dropzone p {
	font-size: 13px;
	font-weight: 400;
}

button.primary,
button.apply-btn {
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: #000;
	font-size: 13px;
	font-weight: 700;
}
html[data-theme='dark'] button.primary,
html[data-theme='dark'] button.apply-btn {
	color: #000;
}
button.primary:hover,
button.apply-btn:hover {
	background: var(--accent);
	filter: brightness(1.1);
	transform: scale(1.02);
}

.stamp {
	border-radius: 999px;
	border: 0;
	background: var(--surface-2);
	color: var(--ink);
	font-size: 11px;
	padding: 4px 10px;
}
.error {
	border-left: 0;
	border-radius: 8px;
}
.search-result {
	border-left: 0;
	border-radius: 8px;
}
.bigstat .num {
	font-size: clamp(36px, 6vw, 58px);
	line-height: 1;
}
.section-title,
.pattern-section h3 {
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
	border-bottom: 0;
}

.item {
	border: 0;
	border-radius: 8px;
	background: var(--surface);
}
.item:hover {
	transform: none;
	background: var(--surface-2);
}
.rank {
	font-size: 16px;
	font-weight: 400;
	color: var(--ink-soft);
}
.name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
}
.sub {
	font-size: 12px;
	font-weight: 400;
}
.art {
	border-radius: 4px;
}
.bar-track,
.pattern-track,
.year-bar-track {
	border-radius: 999px;
}
.bar-fill,
.pattern-fill,
.year-bar-fill {
	border-radius: 999px;
}
.year-bar-fill {
	background: var(--accent);
}

.pattern-row {
	font-size: 13px;
	font-weight: 400;
}
.pattern-card .pattern-detail {
	font-size: 13px;
	font-weight: 400;
}
.pattern-card .pattern-label {
	font-size: 12px;
	font-weight: 700;
}
.cmp-row {
	font-size: 13px;
	font-weight: 400;
	border-bottom-color: var(--surface-2);
}
.cmp-row.head {
	font-size: 11px;
}
.tl-item {
	border-left: 0;
	border-radius: 8px;
	background: var(--surface);
}
.hm-c {
	border-radius: 2px;
	border: 0;
}

.explanation-card h2 {
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.1;
}
.explanation-card h3 {
	font-size: 17px;
	font-weight: 800;
	color: var(--ink);
	border-bottom: 0;
}
.explanation-card p,
.explanation-card li {
	font-size: 14px;
	line-height: 1.7;
	font-weight: 400;
}
.explanation-card strong {
	font-weight: 700;
}
.explanation-callout {
	border-left: 0;
	border-radius: 8px;
}
.foot-row {
	border-top: 1px solid var(--surface-2);
}

@media (max-width: 680px) {
	.card {
		box-shadow: none !important;
	}
	.topbar {
		padding: 20px 16px;
		border-left-width: 0;
	}
}

/* ===== HOVER OUTLINE: 1px invisible by default, so nothing shifts on hover ===== */
.mode-btn,
.results-tab,
.topn-btn,
.tab,
.theme-toggle,
button.primary,
button.apply-btn,
.card,
.pattern-card,
.explanation-card,
.item,
.tl-item,
.dropzone,
.cmp-table,
.disconnect,
input[type='text'],
input[type='date'],
.cmp-controls select,
.hm-c {
	outline: 1px solid transparent;
	outline-offset: -1px;
	transition:
		outline-color 0.25s ease,
		background-color 0.25s ease,
		filter 0.25s ease,
		transform 0.25s ease;
}
.dropzone {
	transition:
		outline-color 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease;
}
.mode-btn:hover,
.results-tab:hover,
.topn-btn:hover,
.tab:hover,
.theme-toggle:hover,
button.primary:hover,
button.apply-btn:hover,
.card:hover,
.pattern-card:hover,
.explanation-card:hover,
.item:hover,
.tl-item:hover,
.dropzone:hover,
.cmp-table:hover,
.disconnect:hover,
input[type='text']:hover,
input[type='date']:hover,
.cmp-controls select:hover,
.hm-c:hover {
	outline-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.swatch {
	transition:
		outline-color 0.25s ease,
		transform 0.25s ease;
}
.swatch:not(.active):hover {
	outline: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
	outline-offset: 2px;
}
.updates-panel {
	display: none !important;
}
.layout.updates-mode .updates-panel {
	display: block !important;
}
/* ===== UPDATES TAB ===== */
:root {
	--info: #2563eb;
} /* blue for "improved" tags */
html[data-theme='dark'] {
	--info: #6aa8ff;
}

.updates-panel {
	display: none !important;
}
.layout.updates-mode {
	grid-template-columns: 1fr 3fr;
} /* 25% sidebar / 75% updates */
.layout.updates-mode .updates-panel {
	display: block !important;
	min-width: 0;
}
.layout.updates-mode .results {
	display: none;
}

.side-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.01em;
}

/* the list itself has NO background, so each update can be its own box */
.updates-list {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.update {
	position: relative;
	overflow: hidden;
	padding: 20px 22px 20px 26px;
	border-radius: 12px;
	background: var(--surface);
	outline: 1px solid transparent;
	outline-offset: -1px;
	transition:
		outline-color 0.25s ease,
		background-color 0.25s ease;
}
.update::before {
	/* colored strip on the left edge */
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--border);
	transition: background 0.25s ease;
}
.update:hover {
	outline-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.update:hover::before {
	background: var(--accent);
}

.update.latest {
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%, var(--surface) 65%);
}
.update.latest::before {
	background: var(--accent);
}

.update-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}
.update-ver {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink);
	font-size: 11px;
	font-weight: 800;
}
.update.latest .update-ver {
	background: var(--accent);
	color: #000;
}
.update-date {
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 400;
}

.update h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.update ul {
	margin: 0;
	padding-left: 18px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.75;
	font-weight: 400;
}
.update li {
	margin: 4px 0;
}
.update li strong {
	color: var(--ink);
	font-weight: 700;
}

.tag {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.tag.new {
	background: color-mix(in srgb, var(--accent) 20%, transparent);
	color: var(--accent);
}
.tag.improved {
	background: color-mix(in srgb, var(--info) 20%, transparent);
	color: var(--info);
}
.tag.fixed {
	background: color-mix(in srgb, var(--accent-2) 20%, transparent);
	color: var(--accent-2);
}

@media (max-width: 880px) {
	.layout.updates-mode {
		grid-template-columns: 1fr;
	} /* stack on phones */
}