/*
 * Tran Van Den — per-user appearance system
 *
 * Loaded after every structural stylesheet, including chat.css, so the
 * sanitized settings from inc/appearance.php remain the final design layer.
 */

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans/InstrumentSans-VariableFont_wdth,wght.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
}

:root {
	--tvh-primary-rgb: 21, 128, 61;
	--tvh-on-primary: #ffffff;
	--tvh-accent-rgb: 15, 159, 143;
	--tvh-accent-hover: #0c7c70;
	--tvh-on-accent: #000000;
	--tvh-base-font-size: 14px;
	--tvh-icon-size: 20px;
}

html {
	color-scheme: light;
}

html[data-tvh-theme="dark"],
html[data-tvh-theme="dark"] .tvh-app {
	color-scheme: dark;
	/* Neutral social-dark scale inspired by the layered charcoal surfaces used
	 * by Facebook and Instagram. Brand colors remain reserved for interaction. */
	--tvh-bg: #0c1014;
	--tvh-bg-accent: #161719;
	--tvh-surface: #1c1c1d;
	--tvh-surface-strong: #252728;
	--tvh-surface-soft: #28292c;
	--tvh-surface-muted: #28292c;
	--tvh-surface-hover: #333334;
	--tvh-border: #3b3c3e;
	--tvh-border-soft: #343638;
	--tvh-border-strong: #46484b;
	--tvh-text: #eef0f3;
	--tvh-text-soft: #d2d5d9;
	--tvh-muted: #a8abb1;
	--tvh-primary-readable: color-mix(in srgb, var(--tvh-primary) 35%, #ffffff);
	--tvh-accent-readable: color-mix(in srgb, var(--tvh-accent) 35%, #ffffff);
	--tvh-primary-soft: color-mix(in srgb, var(--tvh-primary) 18%, #1c1c1d);
	--tvh-accent-soft: color-mix(in srgb, var(--tvh-accent) 16%, #1c1c1d);
	--tvh-success: #55c58c;
	--tvh-success-soft: #153126;
	--tvh-danger: #f08a96;
	--tvh-danger-soft: #371e24;
	--tvh-warning: #efb85d;
	--tvh-warning-soft: #382d17;
	--tvh-info: #77b8ef;
	--tvh-info-soft: #152c40;
	--tvh-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
	--tvh-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
	--tvh-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}

body {
	font-size: var(--tvh-base-font-size);
}

.tvh-button--primary,
.tvh-icon-button--primary,
.tvh-login__submit {
	color: var(--tvh-on-primary);
}

.tvh-button--primary:hover,
.tvh-button--primary:focus-visible,
.tvh-icon-button--primary:hover,
.tvh-icon-button--primary:focus-visible,
.tvh-login__submit:hover,
.tvh-login__submit:focus-visible {
	color: var(--tvh-on-primary);
}

.tvh-app {
	--tvh-primary-soft: color-mix(in srgb, var(--tvh-primary) 10%, var(--tvh-surface));
	--tvh-accent-soft: color-mix(in srgb, var(--tvh-accent) 10%, var(--tvh-surface));
}

/* The secondary accent is deliberately decorative unless used as a full
 * interaction surface, where --tvh-on-accent supplies a readable foreground. */
.tvh-app .tvh-nav__item:not(.is-active) .tvh-nav__icon {
	border-color: color-mix(in srgb, var(--tvh-accent) 24%, var(--tvh-border));
	background: var(--tvh-accent-soft);
}

.tvh-app :where(.tvh-user-avatar, .tvh-user-pill__avatar) {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tvh-accent) 26%, transparent);
	background: var(--tvh-accent-soft);
	color: var(--tvh-text);
}

.tvh-app :where(.tvh-badge--priority-medium, .tvh-badge--status-waiting) {
	border-color: color-mix(in srgb, var(--tvh-accent) 32%, var(--tvh-border));
	background: var(--tvh-accent-soft);
	color: var(--tvh-text);
}

.tvh-app .tvh-suggestion-chip:hover,
.tvh-app .tvh-suggestion-chip:focus-visible {
	border-color: var(--tvh-accent);
	background: var(--tvh-accent);
	color: var(--tvh-on-accent);
}

/* Global preference variants ------------------------------------------ */

.tvh-app[data-shadow="none"] {
	--tvh-shadow-xs: none;
	--tvh-shadow-sm: none;
	--tvh-shadow: none;
}

.tvh-app[data-shadow="strong"] {
	--tvh-shadow-xs: 0 3px 9px rgba(var(--tvh-primary-rgb), 0.09);
	--tvh-shadow-sm: 0 14px 32px rgba(var(--tvh-primary-rgb), 0.14);
	--tvh-shadow: 0 28px 70px rgba(var(--tvh-primary-rgb), 0.20);
}

.tvh-app[data-density="compact"] .tvh-main {
	gap: 16px;
	padding-top: 20px;
	padding-bottom: 28px;
}

.tvh-app[data-density="compact"] :where(.tvh-panel, .tvh-note-card, .tvh-metric, .tvh-home-card) {
	padding: 15px;
}

.tvh-app[data-density="compact"] :where(.tvh-table th, .tvh-table td) {
	padding-block: 9px;
}

.tvh-app[data-density="compact"] :where(.tvh-form, .tvh-form-grid, .tvh-grid) {
	gap: 11px;
}

.tvh-app[data-density="spacious"] .tvh-main {
	gap: 30px;
	padding-top: 46px;
	padding-bottom: 58px;
}

.tvh-app[data-density="spacious"] :where(.tvh-panel, .tvh-note-card, .tvh-metric, .tvh-home-card) {
	padding: clamp(22px, 2.3vw, 32px);
}

.tvh-app[data-density="spacious"] :where(.tvh-table th, .tvh-table td) {
	padding-block: 17px;
}

.tvh-app[data-density="spacious"] :where(.tvh-form, .tvh-form-grid, .tvh-grid) {
	gap: 22px;
}

.tvh-app[data-card-style="flat"] :where(
	.tvh-panel,
	.tvh-note-card,
	.tvh-metric,
	.tvh-home-card,
	.tvh-kanban__col,
	.tvh-kanban__card,
	.tvh-calendar__cell,
	.tvh-ai-action,
	.tvh-ai-chat
) {
	border-color: transparent;
	box-shadow: none;
}

.tvh-app[data-card-style="outlined"] :where(
	.tvh-panel,
	.tvh-note-card,
	.tvh-metric,
	.tvh-home-card,
	.tvh-kanban__col,
	.tvh-kanban__card,
	.tvh-calendar__cell
) {
	border-color: var(--tvh-border-strong);
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-app[data-card-style="elevated"] :where(
	.tvh-panel,
	.tvh-note-card,
	.tvh-metric,
	.tvh-home-card,
	.tvh-kanban__col,
	.tvh-kanban__card,
	.tvh-calendar__cell
) {
	border-color: color-mix(in srgb, var(--tvh-border) 52%, transparent);
	box-shadow: var(--tvh-shadow-sm);
}

.tvh-app[data-card-style="glass"] :where(
	.tvh-panel,
	.tvh-note-card,
	.tvh-metric,
	.tvh-home-card,
	.tvh-kanban__col,
	.tvh-kanban__card,
	.tvh-calendar__cell
) {
	border-color: color-mix(in srgb, var(--tvh-border-strong) 65%, transparent);
	background: color-mix(in srgb, var(--tvh-surface) 82%, transparent);
	box-shadow: var(--tvh-shadow-sm);
	backdrop-filter: blur(18px);
}

.tvh-app[data-icon-style="minimal"] .tvh-nav__icon {
	border-color: transparent;
	background: transparent;
}

.tvh-app[data-icon-style="soft"] .tvh-nav__icon {
	border-color: color-mix(in srgb, var(--tvh-primary) 15%, var(--tvh-border));
	background: color-mix(in srgb, var(--tvh-primary) 7%, var(--tvh-surface));
	color: var(--tvh-text-soft);
}

.tvh-app[data-icon-style="filled"] .tvh-nav__icon {
	border-color: transparent;
	background: var(--tvh-primary);
	color: var(--tvh-on-primary);
	box-shadow: 0 5px 13px rgba(var(--tvh-primary-rgb), 0.22);
}

.tvh-app[data-icon-style="filled"] .tvh-nav__item.is-active .tvh-nav__icon,
.tvh-app[data-icon-style="filled"] .tvh-nav__item[aria-current="page"] .tvh-nav__icon {
	background: var(--tvh-primary-hover);
	color: var(--tvh-on-primary);
}

.tvh-app .tvh-nav__icon .tvh-lucide,
.tvh-app .tvh-mobile-nav__item > .tvh-lucide,
.tvh-app .tvh-bottom-sheet__item > .tvh-lucide {
	width: var(--tvh-icon-size);
	height: var(--tvh-icon-size);
}

.tvh-app[data-sidebar-style="tinted"] .tvh-sidebar {
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--tvh-primary) 8%, var(--tvh-surface)) 0%,
			color-mix(in srgb, var(--tvh-primary) 3%, var(--tvh-surface)) 100%
		);
}

.tvh-app[data-sidebar-style="glass"] .tvh-sidebar {
	background: color-mix(in srgb, var(--tvh-surface) 78%, transparent);
	box-shadow: 10px 0 36px rgba(var(--tvh-primary-rgb), 0.08);
	backdrop-filter: blur(24px) saturate(1.2);
}

.tvh-app[data-sidebar-style="dark"] .tvh-sidebar {
	--tvh-text: #eef0f3;
	--tvh-text-soft: #d2d5d9;
	--tvh-muted: #a8abb1;
	--tvh-border: #3b3c3e;
	--tvh-border-strong: #46484b;
	--tvh-surface: #1c1c1d;
	--tvh-surface-soft: #28292c;
	--tvh-surface-hover: #333334;
	background: #161719;
	color: var(--tvh-text);
}

.tvh-app[data-sidebar-style="dark"] .tvh-sidebar :where(.tvh-brand, .tvh-nav__item, .tvh-sidebar__logout) {
	color: var(--tvh-text-soft);
}

.tvh-app[data-sidebar-style="dark"] .tvh-nav__section-title,
.tvh-app[data-sidebar-style="dark"] .tvh-sidebar__user-text span {
	color: var(--tvh-muted);
}

.tvh-app[data-sidebar-style="dark"] .tvh-nav__icon,
.tvh-app[data-sidebar-style="dark"] .tvh-sidebar__collapse {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text-soft);
}

.tvh-app[data-sidebar-style="dark"] .tvh-nav__item:hover {
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

.tvh-app[data-sidebar-style="dark"] .tvh-nav__item.is-active,
.tvh-app[data-sidebar-style="dark"] .tvh-nav__item[aria-current="page"] {
	border-color: color-mix(in srgb, var(--tvh-primary) 38%, var(--tvh-border));
	background: color-mix(in srgb, var(--tvh-primary) 24%, #161719);
	color: color-mix(in srgb, var(--tvh-primary) 30%, #ffffff);
}

.tvh-app[data-page-layout="focus"] .tvh-main {
	--tvh-content-width: 980px;
}

.tvh-app[data-page-layout="balanced"] .tvh-main {
	--tvh-content-width: 1280px;
}

.tvh-app[data-page-layout="wide"] .tvh-main {
	--tvh-content-width: 1600px;
}

.tvh-app[data-page-layout="full"] .tvh-main {
	width: 100%;
	max-width: none;
}

@media (min-width: 1200px) {
	.tvh-app[data-page-sidebar="hide"] {
		grid-template-columns: var(--tvh-sidebar-collapsed-width) minmax(0, 1fr);
	}

	.tvh-app[data-page-sidebar="hide"] .tvh-sidebar {
		width: var(--tvh-sidebar-collapsed-width);
		padding-inline: 8px;
	}

	.tvh-app[data-page-sidebar="hide"] .tvh-sidebar__head {
		justify-content: center;
	}

	.tvh-app[data-page-sidebar="hide"] :where(
		.tvh-brand,
		.tvh-nav__item,
		.tvh-sidebar__account,
		.tvh-sidebar__logout
	) {
		justify-content: center;
	}

	.tvh-app[data-page-sidebar="hide"] :where(
		.tvh-brand__text,
		.tvh-nav__section-title,
		.tvh-nav__label,
		.tvh-sidebar__user-text,
		.tvh-sidebar__logout-label
	) {
		display: none;
	}

	.tvh-app[data-page-sidebar="hide"] .tvh-sidebar__collapse {
		display: none;
	}
}

.tvh-app[data-motion="reduced"] *,
.tvh-app[data-motion="reduced"] *::before,
.tvh-app[data-motion="reduced"] *::after {
	transition-duration: 60ms !important;
	animation-duration: 1ms !important;
	animation-iteration-count: 1 !important;
}

.tvh-app[data-motion="none"] *,
.tvh-app[data-motion="none"] *::before,
.tvh-app[data-motion="none"] *::after {
	scroll-behavior: auto !important;
	transition: none !important;
	animation: none !important;
}

/* Dark mode — semantic surface sweep ---------------------------------- */

html[data-tvh-theme="dark"] body,
html[data-tvh-theme="dark"] .tvh-app,
html[data-tvh-theme="dark"] .tvh-shell,
html[data-tvh-theme="dark"] .tvh-main {
	background: var(--tvh-bg);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] :where(
	.tvh-sidebar,
	.tvh-panel,
	.tvh-note-card,
	.tvh-metric,
	.tvh-home-card,
	.tvh-kanban__col,
	.tvh-kanban__card,
	.tvh-calendar__cell,
	.tvh-alert,
	.tvh-flash,
	.tvh-public__article,
	.tvh-capture-hero,
	.tvh-ai-action,
	.tvh-ai-chat,
	.tvh-dropdown__panel,
	.tvh-bottom-sheet__panel,
	.tvh-modal__panel,
	.tvh-drawer__panel,
	.tvh-table-wrap,
	.tvh-note-preview,
	.tvh-note-editor,
	.tvh-notes-list,
	.tvh-note-side
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-task-form-modal__panel {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-progress {
	background: var(--tvh-surface-hover);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-empty {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] :where(
	input,
	select,
	textarea,
	.tvh-button,
	.tvh-icon-button,
	.tvh-filter,
	.tvh-search-form,
	.tvh-dropdown__item
) {
	border-color: var(--tvh-border);
	background-color: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] :where(input, select, textarea)::placeholder {
	color: var(--tvh-muted);
	opacity: 0.9;
}

html[data-tvh-theme="dark"] :where(input, select, textarea):disabled {
	background: #17181b;
	color: #858990;
	opacity: 1;
}

html[data-tvh-theme="dark"] :where(
	.tvh-button:hover,
	.tvh-icon-button:hover,
	.tvh-dropdown__item:hover,
	.tvh-nav__item:hover
) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] :where(.tvh-button--primary, .tvh-icon-button--primary) {
	border-color: var(--tvh-primary);
	background: var(--tvh-primary);
	color: var(--tvh-on-primary);
}

html[data-tvh-theme="dark"] :where(.tvh-button--primary, .tvh-icon-button--primary):hover {
	border-color: var(--tvh-primary-hover);
	background: var(--tvh-primary-hover);
	color: var(--tvh-on-primary);
}

html[data-tvh-theme="dark"] :where(
	.tvh-page-head h2,
	.tvh-panel h3,
	.tvh-panel h4,
	.tvh-detail-head h2,
	.tvh-widget-head h3,
	.tvh-table td strong,
	.tvh-list__item strong,
	.tvh-note-card h3
) {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] :where(
	.tvh-muted,
	.tvh-setting-help,
	.tvh-eyebrow,
	.tvh-table td,
	.tvh-sidebar__user-text span
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-table th {
	border-color: var(--tvh-border);
	background: #252728;
	color: #b0b3b8;
}

html[data-tvh-theme="dark"] .tvh-table td {
	border-color: var(--tvh-border);
	background: transparent;
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-table tbody tr:hover {
	background: var(--tvh-surface-hover);
}

html[data-tvh-theme="dark"] :where(.tvh-metric, .tvh-home-card) {
	background: linear-gradient(145deg, var(--tvh-surface) 0%, var(--tvh-surface-strong) 100%);
}

html[data-tvh-theme="dark"] .tvh-topbar {
	border-color: var(--tvh-border);
	background: rgba(12, 16, 20, 0.92);
}

html[data-tvh-theme="dark"] .tvh-sidebar {
	border-color: var(--tvh-border);
	background: rgba(28, 28, 29, 0.96);
}

html[data-tvh-theme="dark"] .tvh-nav__item {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-nav__item.is-active,
html[data-tvh-theme="dark"] .tvh-nav__item[aria-current="page"] {
	border-color: color-mix(in srgb, var(--tvh-primary) 38%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: color-mix(in srgb, var(--tvh-primary) 32%, #ffffff);
}

html[data-tvh-theme="dark"] .tvh-settings-nav__item.is-active {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border));
	background: color-mix(in srgb, var(--tvh-primary) 17%, var(--tvh-surface));
	color: color-mix(in srgb, var(--tvh-primary) 35%, #ffffff);
}

html[data-tvh-theme="dark"] .tvh-nav__icon,
html[data-tvh-theme="dark"] .tvh-sidebar__collapse {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
}

html[data-tvh-theme="dark"] .tvh-mobile-nav {
	border-color: var(--tvh-border);
	background: rgba(28, 28, 29, 0.96);
}

html[data-tvh-theme="dark"] .tvh-mobile-nav__item {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-mobile-nav__item.is-active {
	color: var(--tvh-primary-readable);
}

/* The signed-out screen ships with a deliberately fixed light palette in the
 * legacy login bundle, so it needs an explicit social-dark counterpart. */
html[data-tvh-theme="dark"] .tvh-login {
	background: var(--tvh-bg);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-login__card {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow);
}

html[data-tvh-theme="dark"] :where(
	.tvh-login__brand,
	.tvh-login__brand:hover,
	.tvh-login__head h1,
	.tvh-login__form label
) {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-login__remember {
	color: var(--tvh-muted) !important;
}

html[data-tvh-theme="dark"] .tvh-login__notice {
	border-color: color-mix(in srgb, var(--tvh-primary) 30%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-login__notice--error {
	border-color: color-mix(in srgb, var(--tvh-danger) 36%, var(--tvh-border));
	background: var(--tvh-danger-soft);
	color: color-mix(in srgb, var(--tvh-danger) 62%, #ffffff);
}

html[data-tvh-theme="dark"] .tvh-login__notice--success {
	border-color: color-mix(in srgb, var(--tvh-success) 34%, var(--tvh-border));
	background: var(--tvh-success-soft);
	color: color-mix(in srgb, var(--tvh-success) 60%, #ffffff);
}

html[data-tvh-theme="dark"] .tvh-login__form :where(input[type="text"], input[type="password"]) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-login__brand span,
html[data-tvh-theme="dark"] .tvh-login__submit {
	background: var(--tvh-primary);
	color: var(--tvh-on-primary);
}

html[data-tvh-theme="dark"] .tvh-login__submit:hover {
	background: var(--tvh-primary-hover);
	color: var(--tvh-on-primary);
}

html[data-tvh-theme="dark"] :where(
	.tvh-login__links a,
	.tvh-widget-head a,
	.tvh-widget-links a,
	.tvh-empty a
) {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] :where(
	.tvh-login__links a,
	.tvh-widget-head a,
	.tvh-widget-links a,
	.tvh-empty a
):hover {
	color: color-mix(in srgb, var(--tvh-primary) 22%, #ffffff);
}

html[data-tvh-theme="dark"] .tvh-segmented input:checked + span {
	border-color: color-mix(in srgb, var(--tvh-primary) 48%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-bottom-sheet__item {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-bottom-sheet__item--danger {
	color: color-mix(in srgb, var(--tvh-danger) 65%, #ffffff);
}

/* Dashboard has a late, page-specific light palette in the legacy bundle. */
html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] :where(
	.tvh-dashboard-greeting,
	.tvh-quick-capture,
	.tvh-dashboard-widget
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] .tvh-dashboard-greeting {
	background: linear-gradient(135deg, var(--tvh-surface) 0%, var(--tvh-surface-strong) 100%);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] .tvh-dashboard-widget.is-priority {
	border-color: color-mix(in srgb, var(--dashboard-accent) 34%, var(--tvh-border));
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--dashboard-accent) 9%, var(--tvh-surface)) 0%,
		var(--tvh-surface) 72%
	);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] .tvh-main > .tvh-dashboard-settings {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-sm);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] .tvh-dashboard-settings .tvh-panel__head {
	border-color: var(--tvh-border);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] .tvh-dashboard-settings__row {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] .tvh-dashboard-settings__row:hover {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] :where(
	.tvh-today-summary span,
	.tvh-week-summary span,
	.tvh-finance-summary div,
	.tvh-empty
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="dashboard"] :where(
	.tvh-today-item,
	.tvh-project-item,
	.tvh-note-row,
	.tvh-ai-mini-item,
	.tvh-quick-actions a
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="quick"] .tvh-quick-minimal__form {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	box-shadow: var(--tvh-shadow);
}

/* Late route-specific rules in the legacy bundle use fixed light colors. */
html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :where(
	.tvh-task-toolbar,
	.tvh-task-card
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :where(
	.tvh-task-drawer__panel,
	.tvh-task-form-modal__panel
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :where(
	.tvh-progress,
	.tvh-task-row-action
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	box-shadow: none;
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-row-actions .tvh-task-row-action {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	box-shadow: none;
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-row-actions .tvh-task-row-action:hover,
html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-row-actions .tvh-task-row-action:focus-visible {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] :where(
	.tvh-note-empty,
	.tvh-empty
),
html[data-tvh-theme="dark"] .tvh-app[data-appearance-page="projects"] .tvh-empty {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] :where(
	.tvh-calendar-panel,
	.tvh-filter,
	.tvh-calendar__cell
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__cell:hover {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border));
	background: var(--tvh-surface-hover);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__cell.is-muted {
	background: color-mix(in srgb, var(--tvh-surface) 62%, var(--tvh-bg));
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__cell.is-lunar-first {
	border-color: #357f70;
	background: #132a25;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__cell.is-lunar-full {
	border-color: #8f762f;
	background: #2c2717;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__cell.is-holiday {
	border-color: #8c524d;
	background: #2d1d1c;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar-quick-popover {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow);
}

/* Chat loads its own visual system; these overrides intentionally follow it. */
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] {
	--tvh-chat-ink: var(--tvh-text);
	--tvh-chat-muted: var(--tvh-muted);
	--tvh-chat-line: var(--tvh-border);
	--tvh-chat-soft: var(--tvh-surface-soft);
	--tvh-chat-teal: var(--tvh-primary);
	--tvh-chat-teal-dark: var(--tvh-primary-hover);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-main {
	background: var(--tvh-bg);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-workspace,
	.tvh-chat-rail,
	.tvh-chat-list,
	.tvh-chat-main,
	.tvh-chat-conversation,
	.tvh-chat-aside,
	.tvh-chat-aside-card,
	.tvh-chat-threads,
	.tvh-chat-panel,
	.tvh-chat-messages,
	.tvh-chat-threads__foot,
	.tvh-chat-composer,
	.tvh-chat-modal__panel,
	.tvh-chat-color-menu,
	.tvh-chat-tag-menu,
	.tvh-chat-thread-form,
	.tvh-chat-search-results
) {
	border-color: var(--tvh-border);
	background-color: var(--tvh-surface);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-threads__head,
	.tvh-chat-panel__head,
	.tvh-chat-aside__head,
	.tvh-chat-composer
) {
	border-color: var(--tvh-border);
	background: color-mix(in srgb, var(--tvh-surface) 94%, transparent);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-messages {
	background:
		radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--tvh-primary) 7%, transparent), transparent 26%),
		var(--tvh-bg);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-thread,
	.tvh-chat-manage-link,
	.tvh-chat-threads__tip,
	.tvh-chat-tip-icon,
	.tvh-chat-thread__icon,
	.tvh-chat-mode-toggle,
	.tvh-chat-stats div,
	.tvh-chat-tips li > span,
	.tvh-chat-secret__value
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-thread-row.is-active > .tvh-chat-thread {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	box-shadow: inset 3px 0 var(--tvh-primary);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-message__actions,
	.tvh-chat-composer__field,
	.tvh-chat-mode-menu
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-date > span {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-message--text,
	.tvh-chat-message--checklist,
	.tvh-chat-message--code,
	.tvh-chat-message--secret
) .tvh-chat-message__bubble {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message.is-pinned .tvh-chat-message__bubble,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message--highlight .tvh-chat-message__bubble {
	border-color: #786725;
	background: linear-gradient(135deg, #3a3114, #2c2717);
	color: #f5df8a;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message--quote .tvh-chat-message__bubble {
	border-color: #355a7f;
	background: #17283a;
	color: #c9def7;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-composer textarea,
	.tvh-chat-composer__secret input
) {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-send:disabled {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-page-head h2,
	.tvh-chat-identity strong,
	.tvh-chat-thread__copy strong,
	.tvh-chat-threads__tip strong,
	.tvh-chat-aside h3,
	.tvh-chat-aside strong,
	.tvh-chat-mode-menu__head strong,
	.tvh-chat-mode-option,
	.tvh-chat-tips strong,
	.tvh-chat-recent-list strong,
	.tvh-chat-today-link strong
) {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-identity span,
	.tvh-chat-thread__copy span,
	.tvh-chat-live-status span,
	.tvh-chat-privacy,
	.tvh-chat-tag-row small,
	.tvh-chat-character-count,
	.tvh-chat-character-count b
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-secret__head strong,
	.tvh-chat-secret__value code
) {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message--highlight :where(
	.tvh-chat-message__type,
	time
) {
	color: #f5df8a;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message--quote :where(
	.tvh-chat-message__type,
	time
) {
	color: #c9def7;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-thread,
	.tvh-chat-recent-list a,
	.tvh-chat-result,
	.tvh-chat-tag-row a,
	.tvh-chat-color-menu__options button
):hover {
	background-color: var(--tvh-surface-hover);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-thread.is-active,
	.tvh-chat-result.is-active
) {
	background-color: var(--tvh-primary-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-composer textarea,
	.tvh-chat-search input,
	.tvh-chat-modal input,
	.tvh-chat-modal select,
	.tvh-chat-modal textarea
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-search-preview,
	.tvh-chat-search-preview__head,
	.tvh-chat-search-preview__all,
	.tvh-chat-message__actions-toggle,
	.tvh-chat-message__info-card
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-sm);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message__info-card::after {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message__info-head {
	border-color: var(--tvh-border);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-search-result {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-search-result:hover,
	.tvh-chat-search-result:focus-visible,
	.tvh-chat-search-result.is-active,
	.tvh-chat-search-result[aria-selected="true"],
	.tvh-chat-search-preview__all:hover,
	.tvh-chat-search-preview__all:focus-visible,
	.tvh-chat-message__actions-toggle:hover,
	.tvh-chat-message__actions-toggle:focus-visible,
	.tvh-chat-message__actions-toggle[aria-expanded="true"]
) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-search-preview__head strong,
	.tvh-chat-search-result__snippet,
	.tvh-chat-message__info-card dd
) {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-search-preview__head small,
	.tvh-chat-search-preview__status,
	.tvh-chat-search-result__meta,
	.tvh-chat-message__info-card dt
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-search-result mark,
	.tvh-chat-search-preview mark,
	.tvh-chat-message__info-head > span
) {
	background: var(--tvh-primary-soft);
	box-shadow: none;
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-scroll-bottom,
	.tvh-chat-mode-option,
	.tvh-chat-tag-menu__list label,
	.tvh-chat-emoji-menu,
	.tvh-chat-note-options,
	.tvh-chat-link-list > span,
	.tvh-chat-link-list a > span:first-child,
	.tvh-chat-modal__panel > header,
	.tvh-chat-modal__panel > header button
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-mode-menu__head kbd,
	.tvh-chat-mode-option__icon
) {
	background: var(--tvh-surface-hover);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-mode-option.is-selected,
	.tvh-chat-color-menu__options button.is-selected
) {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-mode-menu .tvh-chat-mode-option.is-selected,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-color-menu .tvh-chat-color-menu__options button.is-selected {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel .tvh-chat-thread-icon-option {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel .tvh-chat-thread-icon-option:hover,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel .tvh-chat-thread-icon-option.is-selected,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel .tvh-chat-thread-icon-option:has(input:checked) {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :where(
	.tvh-chat-context-select select,
	.tvh-chat-note-options input
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-send:disabled,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-composer.is-empty .tvh-chat-send {
	background: var(--tvh-surface-hover) !important;
	box-shadow: none !important;
	color: var(--tvh-muted) !important;
}

/* Advanced settings console ------------------------------------------ */

.tvh-settings-content {
	min-width: 0;
}

.tvh-app[data-page="settings"] .tvh-settings-panel .tvh-form:is(
	.tvh-appearance-form,
	.tvh-page-customizer-form
) {
	width: 100%;
	max-width: none;
	align-items: stretch;
	justify-items: stretch;
}

.tvh-settings-panel-head {
	align-items: flex-start;
	justify-content: space-between;
}

.tvh-settings-panel-head .tvh-eyebrow {
	margin: 0 0 5px;
}

.tvh-settings-panel-head h3 {
	margin-bottom: 5px;
	font-size: clamp(19px, 1.7vw, 23px);
}

.tvh-settings-panel-head .tvh-muted {
	max-width: 720px;
	margin: 0;
}

.tvh-settings-badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 6px 11px;
	border: 1px solid color-mix(in srgb, var(--tvh-accent) 30%, var(--tvh-border));
	border-radius: var(--tvh-radius-pill);
	background: var(--tvh-accent-soft);
	color: var(--tvh-text);
	font-size: 11px;
	font-style: normal;
	font-weight: 720;
}

.tvh-settings-badge .tvh-lucide {
	width: 15px;
	height: 15px;
}

.tvh-form-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tvh-settings-save-row--end {
	justify-content: flex-end;
}

.tvh-appearance-workspace {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
	align-items: start;
	gap: 20px;
}

.tvh-appearance-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.tvh-setting-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius);
	background: var(--tvh-surface-soft);
}

.tvh-setting-card--wide {
	grid-column: 1 / -1;
}

.tvh-setting-card legend {
	display: table;
	padding: 0;
	color: var(--tvh-text);
	font-size: 15px;
	font-weight: 740;
}

.tvh-setting-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.tvh-setting-card h4 {
	margin: 0 0 3px;
	font-size: 15px;
}

.tvh-setting-help {
	margin: 0;
	color: var(--tvh-muted);
	font-size: 11px;
	font-weight: 480;
}

.tvh-setting-card > label {
	display: grid;
	grid-template-columns: minmax(92px, 0.9fr) minmax(0, 1.25fr);
	align-items: center;
	gap: 12px;
}

.tvh-setting-card--navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
}

.tvh-setting-card--navigation .tvh-setting-card__head {
	grid-column: 1 / -1;
}

.tvh-setting-card > label > select {
	width: 100%;
	min-width: 0;
}

.tvh-setting-card > label > input[type="range"] {
	grid-column: 1 / -1;
	width: 100%;
	min-height: 22px;
	padding: 0;
	accent-color: var(--tvh-primary);
}

.tvh-range-value {
	justify-self: end;
	padding: 2px 7px;
	border-radius: var(--tvh-radius-pill);
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
	font-size: 11px;
	font-weight: 750;
}

.tvh-segmented {
	display: grid;
	gap: 8px;
}

.tvh-segmented--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tvh-segmented label {
	cursor: pointer;
}

.tvh-segmented input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.tvh-segmented label > span {
	display: flex;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius-sm);
	background: var(--tvh-surface);
	color: var(--tvh-text-soft);
	transition: border-color var(--tvh-transition), background var(--tvh-transition), color var(--tvh-transition), box-shadow var(--tvh-transition);
}

.tvh-segmented input:checked + span {
	border-color: var(--tvh-primary);
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
	box-shadow: 0 0 0 1px var(--tvh-primary);
}

.tvh-segmented input:focus-visible + span {
	outline: 2px solid var(--tvh-primary);
	outline-offset: 2px;
	box-shadow: var(--tvh-focus);
}

.tvh-segmented .tvh-lucide {
	width: 18px;
	height: 18px;
}

.tvh-palette-presets {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.tvh-palette-preset {
	display: flex;
	min-width: 0;
	min-height: 66px;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 6px;
	padding: 7px;
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius-sm);
	background: var(--tvh-surface);
	color: var(--tvh-text-soft);
	cursor: pointer;
}

.tvh-palette-preset:hover,
.tvh-palette-preset:focus-visible {
	border-color: var(--tvh-primary);
	box-shadow: var(--tvh-focus);
	transform: translateY(-1px);
}

.tvh-palette-preset > span {
	display: block;
	height: 23px;
	border-radius: calc(var(--tvh-radius-sm) - 3px);
	background: linear-gradient(115deg, var(--tvh-preset-primary) 0 52%, var(--tvh-preset-accent) 52% 100%);
}

.tvh-palette-preset small {
	overflow: hidden;
	font-size: 10px;
	font-weight: 650;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tvh-color-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.tvh-color-fields > label {
	display: grid;
	gap: 7px;
}

.tvh-color-control,
.tvh-page-color {
	display: flex;
	min-height: 43px;
	align-items: center;
	gap: 9px;
	padding: 5px 10px 5px 5px;
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius-sm);
	background: var(--tvh-surface);
}

.tvh-color-control input[type="color"],
.tvh-page-color input[type="color"] {
	width: 42px;
	min-width: 42px;
	height: 32px;
	min-height: 32px;
	padding: 2px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	cursor: pointer;
}

.tvh-color-control output,
.tvh-page-color output {
	color: var(--tvh-text-soft);
	font-family: var(--tvh-font-mono);
	font-size: 11px;
	font-weight: 650;
}

.tvh-appearance-preview {
	position: sticky;
	top: 24px;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--tvh-border-strong);
	border-radius: var(--tvh-radius-lg);
	background: #f5f8f6;
	box-shadow: var(--tvh-shadow-sm);
}

.tvh-appearance-preview__head {
	display: flex;
	min-height: 43px;
	align-items: center;
	gap: 9px;
	padding: 8px 12px;
	border-bottom: 1px solid #dce6e0;
	background: #ffffff;
	color: #24332c;
	font-size: 10px;
}

.tvh-appearance-preview__head > span {
	display: flex;
	gap: 4px;
}

.tvh-appearance-preview__head i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c9d4ce;
}

.tvh-appearance-preview__head strong {
	flex: 1;
}

.tvh-appearance-preview__head em {
	padding: 3px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tvh-preview-primary) 10%, #ffffff);
	color: color-mix(in srgb, var(--tvh-preview-primary) 82%, #12201a);
	font-style: normal;
	font-weight: 700;
}

.tvh-preview-shell {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	min-height: 390px;
	background: #f3f7f4;
	color: #1b2a23;
}

.tvh-preview-sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 8px;
	border-right: 1px solid #dce6e0;
	background: #ffffff;
}

.tvh-preview-logo {
	display: grid;
	width: 33px;
	height: 33px;
	margin-bottom: 8px;
	place-items: center;
	border-radius: calc(var(--tvh-preview-radius) - 2px);
	background: #101713;
	color: #ffffff;
	font-family: Georgia, serif;
	font-size: 13px;
}

.tvh-preview-sidebar > span:not(.tvh-preview-logo) {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: calc(var(--tvh-preview-radius) - 3px);
	color: #64756c;
}

.tvh-preview-sidebar > span.is-active {
	background: color-mix(in srgb, var(--tvh-preview-primary) 12%, #ffffff);
	color: var(--tvh-preview-primary);
}

.tvh-preview-sidebar .tvh-lucide {
	width: 16px;
	height: 16px;
}

.tvh-preview-sidebar i {
	display: none;
}

.tvh-preview-main {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 14px;
	padding: 14px;
}

.tvh-preview-main header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tvh-preview-main header span {
	display: flex;
	gap: 5px;
}

.tvh-preview-main header i,
.tvh-preview-main header b {
	display: block;
	width: 36px;
	height: 7px;
	border-radius: 99px;
	background: #d8e2dc;
}

.tvh-preview-main header i:last-child {
	width: 21px;
}

.tvh-preview-main header b {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tvh-preview-accent) 18%, #ffffff);
}

.tvh-preview-title {
	display: grid;
	gap: 3px;
}

.tvh-preview-title strong {
	font-size: 17px;
}

.tvh-preview-title small {
	color: #718178;
	font-size: 9px;
}

.tvh-preview-metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.tvh-preview-metrics > span,
.tvh-preview-card {
	border: 1px solid #dce6e0;
	border-radius: var(--tvh-preview-radius);
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(23, 62, 38, 0.05);
}

.tvh-preview-metrics > span {
	display: grid;
	gap: 5px;
	padding: 12px;
}

.tvh-preview-metrics small {
	color: #718178;
	font-size: 8px;
}

.tvh-preview-metrics strong {
	color: var(--tvh-preview-primary);
	font-size: 18px;
}

.tvh-preview-card {
	display: grid;
	gap: 10px;
	padding: 13px;
}

.tvh-preview-card > span {
	display: grid;
	grid-template-columns: 1fr 45%;
	gap: 14px;
	padding-bottom: 9px;
	border-bottom: 1px solid #ebf0ed;
}

.tvh-preview-card > span:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tvh-preview-card b,
.tvh-preview-card i {
	height: 7px;
	border-radius: 99px;
	background: #d7e1db;
}

.tvh-preview-card i {
	background: color-mix(in srgb, var(--tvh-preview-accent) 18%, #ffffff);
}

.tvh-preview-main button {
	align-self: flex-end;
	min-height: 31px;
	padding: 5px 10px;
	border: 0;
	border-radius: calc(var(--tvh-preview-radius) - 3px);
	background: var(--tvh-preview-primary);
	color: #ffffff;
	font-size: 8px;
	font-weight: 700;
	pointer-events: none;
}

.tvh-appearance-preview > p {
	margin: 0;
	padding: 10px 13px;
	border-top: 1px solid #dce6e0;
	background: #ffffff;
	color: #67776e;
	font-size: 10px;
}

.tvh-appearance-preview[data-preview-theme="dark"] {
	background: #0c1014;
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-appearance-preview__head,
.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-sidebar,
.tvh-appearance-preview[data-preview-theme="dark"] > p {
	border-color: #3b3c3e;
	background: #1c1c1d;
	color: #eef0f3;
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-shell {
	background: #0c1014;
	color: #eef0f3;
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-sidebar {
	border-color: #3b3c3e;
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-sidebar > span:not(.tvh-preview-logo) {
	color: #b0b3b8;
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-sidebar > span.is-active {
	background: color-mix(in srgb, var(--tvh-preview-primary) 22%, #1c1c1d);
	color: color-mix(in srgb, var(--tvh-preview-primary) 55%, #ffffff);
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-appearance-preview__head em {
	background: color-mix(in srgb, var(--tvh-preview-primary) 20%, #252728);
	color: color-mix(in srgb, var(--tvh-preview-primary) 48%, #ffffff);
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-logo {
	background: #0c1014;
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-main header b,
.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-card i {
	background: color-mix(in srgb, var(--tvh-preview-accent) 22%, #252728);
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-title small,
.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-metrics small,
.tvh-appearance-preview[data-preview-theme="dark"] > p {
	color: #a8abb1;
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-metrics > span,
.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-card {
	border-color: #3b3c3e;
	background: #252728;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.tvh-appearance-preview[data-preview-theme="dark"] .tvh-preview-card > span {
	border-color: #3b3c3e;
}

.tvh-appearance-preview[data-preview-theme="dark"] :where(
	.tvh-preview-card b,
	.tvh-preview-main header i
) {
	background: #46484b;
}

.tvh-appearance-preview[data-preview-density="compact"] .tvh-preview-main {
	gap: 9px;
	padding: 10px;
}

.tvh-appearance-preview[data-preview-density="compact"] .tvh-preview-metrics > span,
.tvh-appearance-preview[data-preview-density="compact"] .tvh-preview-card {
	padding: 9px;
}

.tvh-appearance-preview[data-preview-density="spacious"] .tvh-preview-main {
	gap: 19px;
	padding: 18px;
}

.tvh-appearance-preview[data-preview-card="flat"] :where(.tvh-preview-metrics > span, .tvh-preview-card) {
	border-color: transparent;
	box-shadow: none;
}

.tvh-appearance-preview[data-preview-card="elevated"] :where(.tvh-preview-metrics > span, .tvh-preview-card) {
	border-color: transparent;
	box-shadow: 0 12px 25px rgba(17, 54, 31, 0.14);
}

.tvh-appearance-preview[data-preview-card="glass"] :where(.tvh-preview-metrics > span, .tvh-preview-card) {
	background: color-mix(in srgb, #ffffff 76%, transparent);
	backdrop-filter: blur(12px);
}

.tvh-appearance-preview[data-preview-theme="dark"][data-preview-card="glass"] :where(.tvh-preview-metrics > span, .tvh-preview-card) {
	background: rgba(37, 39, 40, 0.78);
}

.tvh-appearance-preview[data-preview-sidebar="tinted"] .tvh-preview-sidebar {
	background: color-mix(in srgb, var(--tvh-preview-primary) 9%, #ffffff);
}

.tvh-appearance-preview[data-preview-sidebar="dark"] .tvh-preview-sidebar {
	border-color: #3b3c3e;
	background: #161719;
}

.tvh-appearance-preview[data-preview-sidebar="glass"] .tvh-preview-sidebar {
	background: color-mix(in srgb, #ffffff 78%, transparent);
	backdrop-filter: blur(15px);
}

.tvh-appearance-preview[data-preview-theme="dark"][data-preview-sidebar="tinted"] .tvh-preview-sidebar {
	background: color-mix(in srgb, var(--tvh-preview-primary) 11%, #1c1c1d);
}

.tvh-appearance-preview[data-preview-theme="dark"][data-preview-sidebar="glass"] .tvh-preview-sidebar {
	background: rgba(28, 28, 29, 0.80);
}

.tvh-settings-actionbar {
	position: sticky;
	z-index: 8;
	bottom: 12px;
	display: grid;
	width: 100%;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	justify-self: stretch;
	margin-top: 6px;
	padding: 12px;
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius);
	background: color-mix(in srgb, var(--tvh-surface) 92%, transparent);
	box-shadow: var(--tvh-shadow-sm);
	backdrop-filter: blur(16px);
}

.tvh-settings-actionbar .tvh-muted {
	font-size: 11px;
}

/* Per-page customizer ------------------------------------------------- */

.tvh-page-customizer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13px;
}

.tvh-page-setting {
	--tvh-page-accent: var(--tvh-primary);
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius);
	background: var(--tvh-surface);
	transition: border-color var(--tvh-transition), box-shadow var(--tvh-transition), background var(--tvh-transition);
}

.tvh-page-setting.is-enabled {
	border-color: color-mix(in srgb, var(--tvh-page-accent) 50%, var(--tvh-border));
	box-shadow: 0 8px 22px color-mix(in srgb, var(--tvh-page-accent) 11%, transparent);
}

.tvh-page-setting > header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	padding: 13px;
	background: var(--tvh-surface-soft);
}

.tvh-page-setting.is-enabled > header {
	background: color-mix(in srgb, var(--tvh-page-accent) 8%, var(--tvh-surface));
}

.tvh-page-setting__icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--tvh-page-accent) 22%, var(--tvh-border));
	border-radius: var(--tvh-radius-sm);
	background: color-mix(in srgb, var(--tvh-page-accent) 10%, var(--tvh-surface));
	color: var(--tvh-page-accent);
}

.tvh-page-setting__icon .tvh-lucide {
	width: 19px;
	height: 19px;
}

.tvh-page-setting > header > span:nth-child(2) {
	display: grid;
	min-width: 0;
	gap: 2px;
}

.tvh-page-setting > header strong {
	color: var(--tvh-text);
	font-size: 13px;
}

.tvh-page-setting > header small {
	overflow: hidden;
	color: var(--tvh-muted);
	font-family: var(--tvh-font-mono);
	font-size: 9px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tvh-switch {
	display: inline-flex !important;
	grid-template-columns: none !important;
	align-items: center;
	gap: 7px !important;
	cursor: pointer;
}

.tvh-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.tvh-switch > span {
	position: relative;
	width: 38px;
	height: 22px;
	border: 1px solid var(--tvh-border-strong);
	border-radius: 999px;
	background: var(--tvh-surface);
	transition: background var(--tvh-transition), border-color var(--tvh-transition);
}

.tvh-switch > span::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tvh-muted);
	content: "";
	transition: transform var(--tvh-transition), background var(--tvh-transition);
}

.tvh-switch input:checked + span {
	border-color: var(--tvh-page-accent);
	background: var(--tvh-page-accent);
}

.tvh-switch input:checked + span::after {
	background: #ffffff;
	transform: translateX(16px);
}

.tvh-switch input:focus-visible + span {
	outline: 2px solid var(--tvh-page-accent);
	outline-offset: 2px;
}

.tvh-switch em {
	color: var(--tvh-muted);
	font-size: 10px;
	font-style: normal;
	font-weight: 650;
}

.tvh-page-setting__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
	padding: 13px;
	opacity: 0.58;
	transition: opacity var(--tvh-transition);
}

.tvh-page-setting.is-enabled .tvh-page-setting__fields {
	opacity: 1;
}

.tvh-page-setting__fields > label {
	display: grid;
	gap: 6px;
}

.tvh-page-setting__fields select,
.tvh-page-setting__fields .tvh-page-color {
	width: 100%;
}

html[data-tvh-theme="dark"] :where(
	.tvh-setting-card,
	.tvh-palette-preset,
	.tvh-color-control,
	.tvh-page-color,
	.tvh-segmented label > span,
	.tvh-page-setting,
	.tvh-page-setting > header,
	.tvh-settings-actionbar
) {
	border-color: var(--tvh-border);
	background-color: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-setting-card {
	background: var(--tvh-surface-soft);
}

html[data-tvh-theme="dark"] .tvh-page-setting.is-enabled > header {
	background: color-mix(in srgb, var(--tvh-page-accent) 13%, var(--tvh-surface));
}

html[data-tvh-theme="dark"] .tvh-settings-badge {
	color: var(--tvh-text);
}

/* Responsive settings ------------------------------------------------ */

@media (max-width: 1180px) {
	.tvh-appearance-workspace {
		grid-template-columns: 1fr;
	}

	.tvh-appearance-preview {
		position: relative;
		top: auto;
		display: grid;
		grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
	}

	.tvh-appearance-preview__head {
		grid-column: 1 / -1;
	}

	.tvh-preview-shell {
		min-height: 320px;
	}

	.tvh-appearance-preview > p {
		display: grid;
		place-items: center;
		border-top: 0;
		border-left: 1px solid #dce6e0;
		font-size: 12px;
		text-align: center;
	}
}

@media (max-width: 900px) {
	.tvh-appearance-controls,
	.tvh-page-customizer-grid {
		grid-template-columns: 1fr;
	}

	.tvh-setting-card--wide {
		grid-column: auto;
	}

	.tvh-form-grid--three {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.tvh-settings-console {
		gap: 14px;
	}

	.tvh-settings-nav {
		gap: 7px;
		padding-bottom: 5px;
		scroll-snap-type: x proximity;
	}

	.tvh-settings-nav__item {
		min-height: 44px;
		scroll-snap-align: start;
	}

	.tvh-settings-panel-head {
		display: grid;
	}

	.tvh-settings-badge {
		justify-self: start;
	}

	.tvh-setting-card--navigation {
		grid-template-columns: minmax(0, 1fr);
	}

	.tvh-appearance-preview {
		display: block;
	}

	.tvh-appearance-preview > p {
		display: block;
		border-top: 1px solid #dce6e0;
		border-left: 0;
	}

	.tvh-settings-actionbar {
		bottom: calc(var(--tvh-mobile-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 8px);
		grid-template-columns: 1fr 1fr;
	}

	.tvh-settings-actionbar .tvh-muted {
		display: none;
	}

	.tvh-settings-actionbar .tvh-button {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}

	.tvh-app[data-page="settings"] .tvh-settings-panel .tvh-settings-actionbar .tvh-button {
		width: 100%;
		justify-self: stretch;
	}

	.tvh-app[data-page="settings"] #settings-account .tvh-form-grid.tvh-form-grid--three {
		display: grid;
		width: 100%;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
		grid-template-columns: minmax(0, 1fr);
	}

	.tvh-app[data-page="settings"] #settings-account .tvh-form-grid.tvh-form-grid--three > label {
		width: 100%;
		min-width: 0;
		flex: initial;
		white-space: normal;
	}
}

@media (max-width: 540px) {
	.tvh-setting-card,
	.tvh-page-setting__fields {
		padding: 13px;
	}

	.tvh-setting-card > label {
		grid-template-columns: 1fr;
	}

	.tvh-setting-card > label .tvh-range-value {
		justify-self: start;
	}

	.tvh-segmented--three {
		grid-template-columns: 1fr;
	}

	.tvh-segmented label > span {
		min-height: 46px;
		justify-content: flex-start;
	}

	.tvh-palette-presets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tvh-color-fields,
	.tvh-page-setting__fields {
		grid-template-columns: 1fr;
	}

	.tvh-page-setting > header {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.tvh-page-setting > header .tvh-switch {
		grid-column: 1 / -1;
		justify-self: stretch;
		justify-content: space-between;
		padding-top: 7px;
		border-top: 1px solid var(--tvh-border);
	}

	.tvh-preview-shell {
		min-height: 330px;
	}

	.tvh-settings-actionbar {
		grid-template-columns: 1fr 1fr;
	}
}

/* Dark contrast hardening ---------------------------------------------
 * Several late legacy component rules use fixed light surfaces or dark ink.
 * Keep this block near the end of the final appearance layer so every
 * interactive state follows the social-dark palette and stays readable. */

html[data-tvh-theme="dark"] .tvh-app .tvh-nav__section-title {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app .tvh-sidebar .tvh-nav__item:hover,
html[data-tvh-theme="dark"] .tvh-app .tvh-sidebar .tvh-nav__item:focus-visible {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
	outline-color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app .tvh-sidebar .tvh-nav__item:is(.is-active, [aria-current="page"]):hover,
html[data-tvh-theme="dark"] .tvh-app .tvh-sidebar .tvh-nav__item:is(.is-active, [aria-current="page"]):focus-visible {
	border-color: color-mix(in srgb, var(--tvh-primary) 48%, var(--tvh-border));
	background: color-mix(in srgb, var(--tvh-primary) 24%, var(--tvh-surface));
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app .tvh-sidebar .tvh-nav__item:hover .tvh-nav__icon,
html[data-tvh-theme="dark"] .tvh-app .tvh-sidebar .tvh-nav__item:focus-visible .tvh-nav__icon {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-soft);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app :is(
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
	select,
	textarea
):focus {
	border-color: color-mix(in srgb, var(--tvh-primary) 62%, var(--tvh-border));
	background-color: var(--tvh-surface-strong);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvh-primary) 28%, transparent);
	color: var(--tvh-text);
	outline: 2px solid transparent;
	outline-offset: 1px;
}

html[data-tvh-theme="dark"] .tvh-app :is(
	.tvh-sensitive-gate__icon,
	.tvh-search-field__icon,
	.tvh-search-idle > .tvh-lucide
) {
	color: var(--tvh-primary-readable);
}

/* Tasks: drawer, modal and semantic status chips. */
html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-drawer__panel {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	box-shadow: -18px 0 48px rgba(0, 0, 0, 0.34);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-drawer__head {
	border-color: var(--tvh-border);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :is(
	.tvh-task-drawer__form label,
	.tvh-task-form-compact label,
	.tvh-task-form-advanced summary
) {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-drawer__form :is(input, select, textarea),
html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-form-compact :is(input, select, textarea) {
	border-color: var(--tvh-border);
	background-color: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-drawer__form :is(input, select, textarea):focus,
html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-form-compact :is(input, select, textarea):focus {
	border-color: color-mix(in srgb, var(--tvh-primary) 62%, var(--tvh-border));
	background-color: var(--tvh-surface-strong);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvh-primary) 28%, transparent);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-drawer__form :is(input, textarea)::placeholder,
html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-form-compact :is(input, textarea)::placeholder {
	color: var(--tvh-muted);
	opacity: 1;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-task-drawer__actions {
	border-color: var(--tvh-border);
	background: linear-gradient(180deg, color-mix(in srgb, var(--tvh-surface) 82%, transparent), var(--tvh-surface) 30%);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :is(.tvh-badge, .tvh-due-chip) {
	--task-chip-bg: var(--tvh-surface-soft);
	--task-chip-fg: var(--tvh-text-soft);
	--task-chip-border: var(--tvh-border-strong);
	--task-chip-dot: var(--tvh-muted);
	border-color: var(--task-chip-border);
	background: var(--task-chip-bg);
	box-shadow: none;
	color: var(--task-chip-fg);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-badge--status-todo {
	--task-chip-bg: #282d2c;
	--task-chip-fg: #d2d9d7;
	--task-chip-border: #46504e;
	--task-chip-dot: #9aa9a5;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :is(
	.tvh-badge--status-doing,
	.tvh-badge--priority-high,
	.tvh-due-chip--today
) {
	--task-chip-bg: #382d17;
	--task-chip-fg: #f4c66f;
	--task-chip-border: #65522b;
	--task-chip-dot: #efb85d;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :is(
	.tvh-badge--status-waiting,
	.tvh-badge--priority-medium,
	.tvh-due-chip--upcoming
) {
	--task-chip-bg: #172a3d;
	--task-chip-fg: #a8d1f4;
	--task-chip-border: #355777;
	--task-chip-dot: #77b8ef;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :is(
	.tvh-badge--status-done,
	.tvh-badge--status-active,
	.tvh-badge--priority-low,
	.tvh-due-chip--later
) {
	--task-chip-bg: #153126;
	--task-chip-fg: #9bddba;
	--task-chip-border: #315e49;
	--task-chip-dot: #55c58c;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] :is(
	.tvh-badge--status-cancelled,
	.tvh-badge--priority-urgent,
	.tvh-due-chip--overdue
) {
	--task-chip-bg: #371e24;
	--task-chip-fg: #ffb3bd;
	--task-chip-border: #74424b;
	--task-chip-dot: #f08a96;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="tasks"] .tvh-due-chip--none {
	--task-chip-bg: #28292c;
	--task-chip-fg: #c3c6cb;
	--task-chip-border: #46484b;
	--task-chip-dot: #a8abb1;
}

/* Notes: active filters and the late light-gradient daily card. */
html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-daily {
	border-color: color-mix(in srgb, var(--tvh-primary) 38%, var(--tvh-border));
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--tvh-primary) 14%, var(--tvh-surface)) 0%, var(--tvh-surface) 62%),
		var(--tvh-surface);
	box-shadow: var(--tvh-shadow-sm);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-daily .tvh-eyebrow {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-daily small {
	border: 1px solid var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-group:hover,
html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-group:focus-visible,
html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-group.is-active {
	border-color: color-mix(in srgb, var(--tvh-primary) 44%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-group:is(:hover, :focus-visible, .is-active) :is(span, .tvh-lucide) {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] .tvh-note-group:is(:hover, :focus-visible, .is-active) em {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] :is(
	.tvh-note-toolbar button,
	.tvh-note-templates button
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="notes"] :is(
	.tvh-note-toolbar button,
	.tvh-note-templates button
):is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--tvh-primary) 44%, var(--tvh-border));
	background: var(--tvh-surface-hover);
	color: var(--tvh-primary-readable);
}

/* Keep the task filters and icon controls compact on one horizontal row. */
.tvh-app[data-page="tasks"] .tvh-task-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > * {
	flex: 0 0 auto;
	margin: 0;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar__search {
	flex: 1 1 220px;
	min-width: 180px;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > select {
	flex: 1 1 120px;
	width: auto;
	min-width: 112px;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar :is(input, select) {
	min-height: 32px;
	padding-block: 5px;
	font-size: 12px;
	line-height: 1.1;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar__search input {
	padding-left: 30px;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar__search .tvh-lucide {
	left: 9px;
	width: 13px;
	height: 13px;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > .tvh-action-icon {
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	flex: 0 0 32px;
	padding: 0;
	border-radius: 8px;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > .tvh-action-icon .tvh-lucide {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > .tvh-task-view-toggle {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 2px;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 2px;
	overflow: visible;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > .tvh-task-view-toggle label {
	flex: 0 0 auto;
	width: auto;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > .tvh-task-view-toggle span {
	width: 28px;
	min-width: 28px;
	height: 28px;
	min-height: 28px;
	padding: 0;
	border-radius: 6px;
}

.tvh-app[data-page="tasks"] .tvh-task-toolbar > .tvh-task-view-toggle .tvh-lucide {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	stroke-width: 2.2;
}

/* Keep the calendar toolbar compact and on a single horizontal row. */
.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter > * {
	flex: 0 0 auto;
	margin: 0;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter input[name="month"] {
	width: 52px;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter input[name="year"] {
	width: 70px;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter select[name="company_id"] {
	flex: 1 1 220px;
	width: auto;
	min-width: 140px;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter :is(input, select, .tvh-button) {
	min-height: 32px;
	padding-block: 5px;
	font-size: 12px;
	line-height: 1.1;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter :is(
	.tvh-calendar-view-toggle,
	.tvh-calendar-mode-toggle
) {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 2px;
	min-height: 0;
	padding: 2px;
	overflow: visible;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter :is(
	.tvh-calendar-view-toggle,
	.tvh-calendar-mode-toggle
) label {
	flex: 0 0 auto;
	width: auto;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter :is(
	.tvh-calendar-view-toggle,
	.tvh-calendar-mode-toggle
) span {
	width: auto;
	min-width: 0;
	min-height: 28px;
	padding: 4px 7px;
	border-radius: 6px;
	font-size: 10.5px;
	line-height: 1;
	white-space: nowrap;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter .tvh-calendar-mode-toggle span {
	width: 28px;
	min-width: 28px;
	height: 28px;
	padding: 0;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter .tvh-calendar-mode-toggle .tvh-lucide {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

.tvh-app[data-page="calendar"] .tvh-calendar-panel > .tvh-filter .tvh-button {
	width: auto;
	min-width: 50px;
	padding-inline: 9px;
	white-space: nowrap;
}

/* Calendar: the month shell and labels otherwise retain a fixed light skin. */
html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] :is(
	.tvh-calendar-month,
	.tvh-calendar-week-day
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] :is(
	.tvh-calendar-month h3,
	.tvh-calendar__date strong,
	.tvh-calendar-week-day__date strong,
	.tvh-calendar-week-day__date span
) {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] :is(
	.tvh-calendar__dow,
	.tvh-calendar__date small,
	.tvh-calendar-week-day__date small,
	.tvh-calendar-week-day__empty
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__cell:is(:hover, :focus-visible),
html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar-week-day:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--tvh-primary) 52%, var(--tvh-border));
	background: var(--tvh-surface-hover);
	outline-color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] :is(
	.tvh-calendar-view-toggle,
	.tvh-calendar-mode-toggle
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] :is(
	.tvh-calendar-view-toggle,
	.tvh-calendar-mode-toggle
) span {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] :is(
	.tvh-calendar-view-toggle,
	.tvh-calendar-mode-toggle
) input:checked + span {
	border-color: color-mix(in srgb, var(--tvh-primary) 48%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__holiday {
	border-color: #74423d;
	background: #3b2422;
	color: #ffb4aa;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar__badge {
	border-color: #6b592d;
	background: #382d17;
	color: #f4c66f;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar-week-day.is-lunar-first {
	background: #132a25;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar-week-day.is-lunar-full {
	background: #2c2717;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="calendar"] .tvh-calendar-week-day.is-holiday {
	background: #2d1d1c;
}

/* Chat: header rails, message actions, composer tools and secondary copy. */
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-rail-toggle,
	.tvh-chat-panel__actions .tvh-icon-button
) {
	border-color: transparent;
	background: transparent;
	color: var(--tvh-text-soft);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-rail-toggle,
	.tvh-chat-panel__actions .tvh-icon-button
):is(:hover, :focus-visible, [aria-expanded="true"]) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
	color: var(--tvh-primary-readable);
	outline-color: var(--tvh-primary-readable);
	transform: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-composer__tools .tvh-chat-composer__icon,
	.tvh-chat-composer__input-row .tvh-chat-composer__emoji > .tvh-chat-composer__icon,
	.tvh-chat-tool-button,
	.tvh-chat-preference
) {
	border-color: transparent !important;
	background: var(--tvh-surface-soft) !important;
	color: var(--tvh-text-soft);
	box-shadow: none !important;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-composer__tools .tvh-chat-composer__icon,
	.tvh-chat-composer__input-row .tvh-chat-composer__emoji > .tvh-chat-composer__icon,
	.tvh-chat-tool-button,
	.tvh-chat-preference
):is(:hover, :focus-visible, :focus-within, [aria-expanded="true"]) {
	border-color: color-mix(in srgb, var(--tvh-primary) 42%, var(--tvh-border)) !important;
	background: var(--tvh-surface-hover) !important;
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message__actions {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-message__action,
	.tvh-chat-message__actions-toggle,
	.tvh-chat-thread-row__actions a,
	.tvh-chat-thread-row__actions button,
	.tvh-chat-tag-row__actions a,
	.tvh-chat-tag-row__actions button
) {
	border-color: transparent;
	background: transparent;
	color: var(--tvh-text-soft);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-message__action,
	.tvh-chat-message__actions-toggle,
	.tvh-chat-thread-row__actions a,
	.tvh-chat-thread-row__actions button,
	.tvh-chat-tag-row__actions a,
	.tvh-chat-tag-row__actions button
):is(:hover, :focus-visible, [aria-expanded="true"]) {
	border-color: color-mix(in srgb, var(--tvh-primary) 40%, var(--tvh-border));
	background: var(--tvh-surface-hover);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-message__action--danger:is(:hover, :focus-visible),
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-thread-row__actions [data-confirm-delete]:is(:hover, :focus-visible),
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-row__actions [data-confirm-delete]:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--tvh-danger) 45%, var(--tvh-border));
	background: var(--tvh-danger-soft);
	color: #ffb3bd;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-identity small,
	.tvh-chat-thread__copy small,
	.tvh-chat-thread em,
	.tvh-chat-threads__tip p,
	.tvh-chat-stats span,
	.tvh-chat-tips small,
	.tvh-chat-recent-list small,
	.tvh-chat-link-list small,
	.tvh-chat-aside-empty,
	.tvh-chat-secret__head small,
	.tvh-chat-secret__status,
	.tvh-chat-message time,
	.tvh-chat-message__edited,
	.tvh-chat-search__field > .tvh-lucide,
	.tvh-chat-composer__meta
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-message__type,
	.tvh-chat-secret__head strong,
	.tvh-chat-secret__value code
) {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-aside-card__link,
	.tvh-chat-recent .tvh-chat-aside-card__head a,
	.tvh-chat-load-older a,
	.tvh-chat-tag-menu__new,
	.tvh-chat-edit-tags > a
) {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] kbd {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-hover);
	box-shadow: none;
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-aside__head small,
	.tvh-chat-links .tvh-chat-aside-card__head > span
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-privacy .tvh-lucide {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__actions {
	border-color: var(--tvh-border);
	background: color-mix(in srgb, var(--tvh-surface) 96%, transparent);
	box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.16);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-thread-preview,
	.tvh-chat-tag-preview
) {
	border-color: var(--tvh-border);
	background: linear-gradient(135deg, var(--tvh-surface-soft), var(--tvh-surface-strong));
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-thread-preview__copy > strong,
	.tvh-chat-tag-name-field,
	.tvh-chat-thread-field,
	.tvh-chat-thread-icon-picker > legend,
	.tvh-chat-thread-color-picker > legend,
	.tvh-chat-tag-color-picker > legend
) {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-thread-preview__copy > small,
	.tvh-chat-thread-preview__copy > span,
	.tvh-chat-thread-modal-help,
	.tvh-chat-tag-preview__label,
	.tvh-chat-tag-preview p,
	.tvh-chat-tag-color-picker__custom output
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-thread-color-option {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-thread-color-option:is(:hover, :focus-visible, .is-selected) {
	border-color: color-mix(in srgb, var(--tvh-primary) 48%, var(--tvh-border));
	background: var(--tvh-surface-hover);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvh-primary) 24%, transparent);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-color-picker__custom {
	border-color: var(--tvh-border);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel :is(
	.tvh-chat-thread-custom-color,
	.tvh-chat-tag-custom-color
) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-color-option:is(:hover, .is-selected) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
}

/* Late chat.css rules use page-level specificity, so keep these interactive
 * controls explicitly dark in their hover/focus and modal label states. */
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-manage-link {
	border: 1px solid var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-manage-link:is(:hover, :focus-visible) {
	border: 1px solid color-mix(in srgb, var(--tvh-primary) 48%, var(--tvh-border));
	background: var(--tvh-surface-hover);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-composer__field,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-composer__field:focus-within {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-composer__field:focus-within {
	border-color: color-mix(in srgb, var(--tvh-primary) 58%, var(--tvh-border));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvh-primary) 25%, transparent), 0 8px 24px rgba(0, 0, 0, 0.22);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-composer__head,
	.tvh-chat-composer__tools,
	.tvh-chat-composer__input-row
) {
	border-color: var(--tvh-border);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-mode-menu,
	.tvh-chat-color-menu,
	.tvh-chat-tag-menu,
	.tvh-chat-emoji-menu
) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-color-menu,
	.tvh-chat-tag-menu,
	.tvh-chat-emoji-menu
) > strong,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-mode-menu__head strong {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] :is(
	.tvh-chat-mode-menu__head small,
	.tvh-chat-mode-option small
) {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-color-menu__options button {
	border-color: transparent;
	background: transparent;
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-color-menu__options button:is(:hover, :focus-visible) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-menu__list label {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-menu__list label > span {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-menu__list label:has(input:checked) {
	border-color: color-mix(in srgb, var(--tvh-primary) 48%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-menu__list label:has(input:checked) > span {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-tag-menu__list:empty::before {
	background: var(--tvh-surface-soft);
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-emoji-menu button:is(:hover, :focus-visible) {
	background: var(--tvh-surface-hover);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel--thread .tvh-chat-thread-field > span,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel--tag .tvh-chat-tag-name-field > span,
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-modal__panel--tag .tvh-chat-tag-color-picker > legend {
	color: var(--tvh-text-soft);
}

/* Desktop task review table. Shared component rules turn table metadata
 * cells into oversized pills; keep the row itself quiet and reserve rounded
 * shapes for the compact status chips and action controls. */
@media (min-width: 701px) {
	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table {
		min-width: 960px;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table :is(th, td) {
		padding: 10px 14px;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table th {
		height: 38px;
		font-size: 10px;
		font-weight: 780;
		letter-spacing: 0.045em !important;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table :is(th, td):nth-child(n + 3):nth-child(-n + 6) {
		text-align: center;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table tbody tr[data-task-row] > td {
		transition: background-color var(--tvh-transition), box-shadow var(--tvh-transition);
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table tbody tr[data-task-row]:is(:hover, :focus-within) > td {
		background: color-mix(in srgb, var(--tvh-primary) 6%, var(--tvh-surface));
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table tbody tr[data-task-row]:is(:hover, :focus-within) > td:first-child {
		box-shadow: inset 3px 0 color-mix(in srgb, var(--tvh-primary) 78%, transparent);
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table .tvh-task-meta {
		min-height: 0;
		border: 0;
		border-bottom: 1px solid var(--tvh-border);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--tvh-text-soft);
		font-weight: inherit;
		line-height: 1.35;
		text-align: center;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table tr:last-child .tvh-task-meta {
		border-bottom: 0;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-task-table__title .tvh-link-button {
		display: inline-flex;
		justify-content: flex-start;
		min-height: 32px;
		padding: 5px 8px;
		border-color: transparent;
		border-radius: 8px;
		background: transparent;
		box-shadow: none;
		color: var(--tvh-text);
		font-size: 13px;
		font-weight: 720;
		line-height: 1.25;
		text-align: left;
		transform: none;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-task-table__title .tvh-link-button:is(:hover, :focus-visible) {
		border-color: color-mix(in srgb, var(--tvh-primary) 25%, transparent);
		background: var(--tvh-primary-soft);
		box-shadow: none;
		color: var(--tvh-primary-readable, var(--tvh-primary-hover));
		text-decoration: none;
		transform: none;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-task-table__title small:empty {
		display: none;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-task-meta :is(.tvh-badge, .tvh-due-chip) {
		min-height: 26px;
		margin-inline: auto;
		padding: 4px 9px;
		font-size: 10.5px;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-task-meta--progress .tvh-progress {
		width: 100%;
		max-width: none;
		min-width: 110px;
		height: 14px;
		margin: 0;
		background: var(--tvh-surface-soft);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tvh-text) 8%, transparent);
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-task-meta--progress .tvh-progress i {
		background: linear-gradient(90deg, var(--tvh-primary), color-mix(in srgb, var(--tvh-primary) 72%, var(--tvh-accent)));
		box-shadow: none;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-task-meta--progress .tvh-progress span {
		color: var(--tvh-text-soft);
		font-size: 10px;
		font-variant-numeric: tabular-nums;
		font-weight: 780;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-table .tvh-row-actions {
		display: table-cell;
		width: 88px;
		min-width: 88px;
		padding: 10px 12px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-row-actions .tvh-task-row-action {
		display: inline-grid;
		width: 30px;
		height: 30px;
		min-width: 30px;
		min-height: 30px;
		margin-inline: 2px;
		border-color: var(--tvh-border);
		border-radius: 8px;
		background: var(--tvh-surface-soft);
		box-shadow: none;
		color: var(--tvh-text-soft);
		transform: none;
	}

	.tvh-app[data-page="tasks"] .tvh-task-list-view .tvh-row-actions .tvh-task-row-action:is(:hover, :focus-visible) {
		border-color: color-mix(in srgb, var(--tvh-primary) 44%, var(--tvh-border));
		background: var(--tvh-primary-soft);
		box-shadow: none;
		color: var(--tvh-primary-readable, var(--tvh-primary-hover));
		transform: none;
	}
}

/* Give every notebook row the same small breathing space. The two built-in
 * rows are direct links while custom rows have wrappers, so block margins
 * previously left the first pair touching and the remaining gaps uneven. */
.tvh-app[data-page="chat"] .tvh-chat-thread-list {
	display: grid;
	grid-auto-rows: max-content;
	align-content: start;
	gap: 4px;
}

.tvh-app[data-page="chat"] .tvh-chat-thread-row {
	margin-block: 0;
}

/* Keep shared-link rows on the charcoal interaction layer. chat.css otherwise
 * paints the entire row light grey when it is hovered or keyboard-focused. */
html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-link-list a:is(:hover, :focus-visible) {
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
	outline-color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="chat"] .tvh-chat-link-list a:is(:hover, :focus-visible) > span:first-child {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
}

/* Search cards: the structural stylesheet uses fixed white/pastel mixes for
 * section headers and empty states. Rebuild those layers from the social-dark
 * palette while retaining a distinct, readable accent for every result type. */
html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-box {
	border-color: color-mix(in srgb, var(--tvh-primary) 34%, var(--tvh-border));
	background: linear-gradient(180deg, var(--tvh-surface-strong), var(--tvh-surface));
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-field input {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-summary {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text-soft);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-summary strong {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-summary span {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-section {
	--tvh-search-accent-readable: color-mix(in srgb, var(--tvh-search-accent) 68%, #ffffff);
	--tvh-search-soft: color-mix(in srgb, var(--tvh-search-accent) 14%, var(--tvh-surface-strong));
	border-color: color-mix(in srgb, var(--tvh-search-accent-readable) 34%, var(--tvh-border));
	border-top-color: var(--tvh-search-accent-readable);
	background: var(--tvh-surface);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-section__head {
	border-bottom-color: color-mix(in srgb, var(--tvh-search-accent-readable) 24%, var(--tvh-border));
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--tvh-search-accent) 10%, var(--tvh-surface-strong)),
		var(--tvh-surface-strong) 72%
	);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-section__head h3 {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-section__head small {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-section__icon {
	border: 1px solid color-mix(in srgb, var(--tvh-search-accent-readable) 32%, var(--tvh-border));
	background: var(--tvh-search-soft);
	box-shadow: none;
	color: var(--tvh-search-accent-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-section__head b {
	border: 1px solid color-mix(in srgb, var(--tvh-search-accent-readable) 40%, transparent);
	background: color-mix(in srgb, var(--tvh-search-accent) 82%, #111315);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
	color: #ffffff;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-list {
	background: var(--tvh-surface);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-empty {
	border-color: color-mix(in srgb, var(--tvh-search-accent-readable) 30%, var(--tvh-border));
	background: color-mix(in srgb, var(--tvh-search-accent) 5%, var(--tvh-surface-strong));
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-item {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-item + .tvh-search-item {
	border-top-color: var(--tvh-border);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-item strong {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-item small {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-item em {
	color: var(--tvh-search-accent-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-item:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--tvh-search-accent) 10%, var(--tvh-surface-hover));
	color: var(--tvh-text);
	outline-color: var(--tvh-search-accent-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-item:is(:hover, :focus-visible) em {
	opacity: 1;
	transform: translateX(0);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="search"] .tvh-search-idle {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
}

/* Finance workbook tabs and neutral balance card ---------------------- */

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs > .tvh-tab--system,
html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs .tvh-managed-tab {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs .tvh-managed-tab__main {
	background: transparent;
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs :is(.tvh-tab--system, .tvh-managed-tab__main):is(:hover, :focus-visible) {
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs :is(.tvh-tab--system, .tvh-managed-tab__main).is-active {
	border-color: color-mix(in srgb, var(--tvh-primary) 52%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tvh-primary) 62%, transparent);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs .tvh-managed-tab__actions {
	opacity: 0.88;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs .tvh-managed-tab__action {
	background: transparent;
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs .tvh-managed-tab__action:is(:hover, :focus-visible) {
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] .tvh-finance-tabs .tvh-managed-tab__action--danger {
	color: var(--tvh-danger);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] [data-cash-metrics] > .tvh-metric:not(.tvh-metric--income):not(.tvh-metric--expense):not(.tvh-metric--danger) {
	border-color: var(--tvh-border-strong);
	background: linear-gradient(145deg, var(--tvh-surface) 0%, var(--tvh-surface-strong) 100%);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] [data-cash-metrics] > .tvh-metric:not(.tvh-metric--income):not(.tvh-metric--expense):not(.tvh-metric--danger)::after {
	background: var(--tvh-primary-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] [data-cash-metrics] > .tvh-metric:not(.tvh-metric--income):not(.tvh-metric--expense):not(.tvh-metric--danger) span {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="cash"] [data-cash-metrics] > .tvh-metric:not(.tvh-metric--income):not(.tvh-metric--expense):not(.tvh-metric--danger) strong {
	color: var(--tvh-primary-readable);
}

/* Password spreadsheet ------------------------------------------------ */

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-tabs > button {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-text-soft);
	box-shadow: none;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-tabs > button:is(:hover, :focus-visible) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-tabs > button.is-active {
	border-color: color-mix(in srgb, var(--tvh-primary) 52%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tvh-primary) 62%, transparent);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet-wrap {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	scrollbar-color: var(--tvh-border-strong) var(--tvh-surface);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet :is(th, td) {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet th,
html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet th:first-child {
	background: var(--tvh-surface-soft);
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet td:first-child {
	background: #202224;
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet__actions {
	background: var(--tvh-surface-strong) !important;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet tr.is-saving td {
	background: color-mix(in srgb, var(--tvh-primary) 10%, var(--tvh-surface-strong));
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet :is(input, select) {
	background: transparent;
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet :is(input, select):focus {
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] .tvh-password-sheet input::placeholder {
	color: #b9bdc4;
	opacity: 1;
}

html[data-tvh-theme="dark"] .tvh-app[data-page="passwords"] [data-password-copy-cell]:disabled {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-muted);
	opacity: 1;
}

/* Reports use compact cards whose source styles intentionally carry their
 * own light palette. Re-map every analytical layer for dark mode. */
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-filter {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-filter label {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi.tvh-metric {
	border-color: var(--tvh-border-strong);
	background: linear-gradient(145deg, var(--tvh-surface) 0%, var(--tvh-surface-strong) 100%);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi.tvh-metric--income {
	border-color: color-mix(in srgb, var(--tvh-success) 30%, var(--tvh-border));
	background: linear-gradient(145deg, var(--tvh-surface) 0%, var(--tvh-success-soft) 100%);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi:is(.tvh-metric--expense, .tvh-metric--danger) {
	border-color: color-mix(in srgb, var(--tvh-danger) 30%, var(--tvh-border));
	background: linear-gradient(145deg, var(--tvh-surface) 0%, var(--tvh-danger-soft) 100%);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi span,
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi small {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi strong {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi.tvh-metric--income strong {
	color: var(--tvh-success);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-kpi:is(.tvh-metric--expense, .tvh-metric--danger) strong {
	color: var(--tvh-danger);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-insight {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-strong);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-insight strong {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-insight small {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-insight__icon {
	background: var(--tvh-info-soft);
	color: var(--tvh-info);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-insight--success .tvh-report-insight__icon {
	background: var(--tvh-success-soft);
	color: var(--tvh-success);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-insight--warning .tvh-report-insight__icon {
	background: var(--tvh-warning-soft);
	color: var(--tvh-warning);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-insight--danger .tvh-report-insight__icon {
	background: var(--tvh-danger-soft);
	color: var(--tvh-danger);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-panel__head,
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-mini-table :is(th, td),
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-list__item {
	border-color: var(--tvh-border);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-panel h4 {
	color: var(--tvh-text-soft);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-facts > div,
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-action,
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-hotspot {
	border-color: var(--tvh-border);
	background: var(--tvh-surface-soft);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] :is(.tvh-report-action, .tvh-report-hotspot):is(:hover, :focus-visible) {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] :is(.tvh-report-action, .tvh-report-hotspot) strong,
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-facts strong {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] :is(.tvh-report-action, .tvh-report-hotspot) :is(small, span),
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-facts span,
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-mini-table th {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-bar-row .tvh-bar,
html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-strength {
	background: var(--tvh-surface-hover);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] :is(.tvh-report-status-chip, .tvh-report-delta) {
	background: var(--tvh-info-soft);
	color: var(--tvh-info);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-delta--good {
	background: var(--tvh-success-soft);
	color: var(--tvh-success);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="reports"] .tvh-report-delta--bad {
	background: var(--tvh-danger-soft);
	color: var(--tvh-danger);
}

/* Settings panels are switched in place, so every hidden tab needs its own
 * dark-state protection rather than relying only on the initially visible one. */
html[data-tvh-theme="dark"] .tvh-app[data-page="settings"] :is(
	.tvh-range-value,
	.tvh-range-value output
) {
	border-color: color-mix(in srgb, var(--tvh-primary) 40%, var(--tvh-border));
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="settings"] .tvh-preview-metrics strong {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="settings"] .tvh-page-setting__icon {
	color: var(--tvh-primary-readable);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="settings"] #settings-security .tvh-metric {
	border-color: var(--tvh-border-strong);
	background: linear-gradient(145deg, var(--tvh-surface) 0%, var(--tvh-surface-strong) 100%);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-xs);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="settings"] #settings-security .tvh-metric span {
	color: var(--tvh-muted);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="settings"] #settings-security .tvh-metric strong {
	color: var(--tvh-text);
}

html[data-tvh-theme="dark"] .tvh-app[data-page="settings"] #settings-security .tvh-metric--danger strong {
	color: var(--tvh-danger);
}

@media (prefers-reduced-motion: reduce) {
	.tvh-app *,
	.tvh-app *::before,
	.tvh-app *::after {
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (forced-colors: active) {
	.tvh-palette-preset,
	.tvh-segmented label > span,
	.tvh-page-setting,
	.tvh-settings-badge,
	.tvh-switch > span {
		border: 1px solid CanvasText;
	}

	.tvh-segmented input:checked + span,
	.tvh-switch input:checked + span {
		outline: 3px solid Highlight;
	}
}