/*
 * Tran Van Den — Buffer-inspired visual system
 *
 * This layer intentionally sits after the existing component styles.  It
 * refreshes the visual language without changing the markup, data contracts,
 * form names, REST hooks, or JavaScript selectors used by the hub.
 */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope/Manrope-VariableFont_wght.woff2") format("woff2");
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
}

:root {
	--tvh-font-sans: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--tvh-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--tvh-bg: #f6f7f9;
	--tvh-bg-accent: #eef1f6;
	--tvh-surface: #ffffff;
	--tvh-surface-strong: #ffffff;
	--tvh-surface-soft: #f4f6f8;
	--tvh-surface-hover: #eef2f7;
	--tvh-border: #e1e6ed;
	--tvh-border-strong: #c8d1dd;
	--tvh-text: #202630;
	--tvh-text-soft: #4d5968;
	--tvh-muted: #687484;
	--tvh-primary: #4f46d8;
	--tvh-primary-hover: #4038b8;
	--tvh-primary-soft: #eef0ff;
	--tvh-accent: #6974e8;
	--tvh-accent-soft: #f1f2ff;
	--tvh-success: #21845c;
	--tvh-success-soft: #e9f7f0;
	--tvh-danger: #c24d5b;
	--tvh-danger-soft: #fcecee;
	--tvh-warning: #a66c16;
	--tvh-warning-soft: #fff5df;
	--tvh-info: #3479bf;
	--tvh-info-soft: #eaf3fc;
	--tvh-white: #ffffff;
	--tvh-radius-xs: 7px;
	--tvh-radius-sm: 9px;
	--tvh-radius: 13px;
	--tvh-radius-lg: 17px;
	--tvh-radius-xl: 22px;
	--tvh-radius-pill: 999px;
	--tvh-shadow-xs: 0 1px 2px rgba(28, 39, 53, 0.04);
	--tvh-shadow-sm: 0 5px 18px rgba(28, 39, 53, 0.055);
	--tvh-shadow: 0 16px 42px rgba(28, 39, 53, 0.10);
	--tvh-focus: 0 0 0 3px rgba(79, 70, 216, 0.18);
	--tvh-sidebar-width: 248px;
	--tvh-sidebar-collapsed-width: 72px;
	--tvh-content-width: 1456px;
	--tvh-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
	background: var(--tvh-bg);
	color-scheme: light;
	scroll-behavior: smooth;
}

body,
body button,
body input,
body select,
body textarea,
body optgroup {
	font-family: var(--tvh-font-sans);
}

body {
	margin: 0;
	background: var(--tvh-bg);
	color: var(--tvh-text);
	font-size: 14px;
	font-weight: 470;
	line-height: 1.58;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body :where(button, input, select, textarea, optgroup) {
	font: inherit;
}

body :where(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	color: var(--tvh-text);
	font-family: var(--tvh-font-sans);
	font-weight: 730;
	line-height: 1.22;
	letter-spacing: -0.025em !important;
}

body :where(h1, h2) {
	font-weight: 760;
}

body :where(p, li, dd, dt, td) {
	font-weight: 470;
}

body :where(th, label, legend) {
	font-weight: 650;
}

body :where(a) {
	color: var(--tvh-primary);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--tvh-transition), background-color var(--tvh-transition), border-color var(--tvh-transition), box-shadow var(--tvh-transition), transform var(--tvh-transition);
}

body :where(a:hover, a:focus-visible) {
	color: var(--tvh-primary-hover);
	text-decoration: none;
}

body :where(code, pre, kbd, samp) {
	font-family: var(--tvh-font-mono);
}

::selection {
	background: rgba(79, 70, 216, 0.18);
	color: var(--tvh-text);
}

img,
svg {
	max-width: 100%;
}

/* App shell ------------------------------------------------------------- */

.tvh-app {
	grid-template-columns: var(--tvh-sidebar-width) minmax(0, 1fr);
	min-height: 100vh;
	background: var(--tvh-bg);
}

.tvh-shell {
	min-width: 0;
	background: var(--tvh-bg);
}

.tvh-sidebar {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	height: 100dvh;
	padding: 18px 13px 14px;
	overflow-x: hidden;
	border-right: 1px solid var(--tvh-border);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 8px 0 26px rgba(28, 39, 53, 0.025);
	backdrop-filter: blur(18px);
}

.tvh-sidebar__head {
	margin-bottom: 18px;
}

.tvh-brand {
	gap: 10px;
	min-height: 48px;
	padding: 5px 7px;
	border-radius: var(--tvh-radius);
}

.tvh-brand:hover {
	background: var(--tvh-surface-soft);
}

.tvh-brand__mark {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: linear-gradient(145deg, #5d64e7 0%, #4439c4 100%);
	box-shadow: 0 7px 16px rgba(79, 70, 216, 0.22);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em !important;
}

.tvh-brand__name {
	font-size: 14px;
	font-weight: 760;
	letter-spacing: -0.01em !important;
}

.tvh-brand__sub,
.tvh-small {
	color: var(--tvh-muted);
	font-size: 11px;
}

.tvh-sidebar__collapse,
.tvh-icon-button {
	border-color: var(--tvh-border);
	background: var(--tvh-surface);
	color: var(--tvh-text-soft);
}

.tvh-sidebar__collapse:hover,
.tvh-icon-button:hover {
	border-color: var(--tvh-border-strong);
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
}

.tvh-nav {
	gap: 20px;
}

.tvh-nav__section {
	gap: 6px;
}

.tvh-nav__section-title {
	padding: 0 10px;
	color: #687484;
	font-size: 10px;
	font-weight: 760;
	letter-spacing: 0.08em !important;
}

.tvh-nav__list {
	gap: 3px;
}

.tvh-nav__item {
	min-height: 42px;
	padding: 7px 10px;
	border: 1px solid transparent;
	border-radius: 11px;
	color: var(--tvh-text-soft);
	font-size: 13px;
	font-weight: 610;
}

.tvh-nav__item:hover {
	background: #f4f5fb;
	color: var(--tvh-text);
	transform: translateX(1px);
}

.tvh-nav__item.is-active,
.tvh-nav__item[aria-current="page"] {
	border-color: #dcdfff;
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
	font-weight: 700;
}

.tvh-nav__item.is-active::before,
.tvh-nav__item[aria-current="page"]::before {
	inset: 9px auto 9px -2px;
	width: 3px;
	background: var(--tvh-primary);
}

.tvh-nav__icon {
	width: 28px;
	height: 28px;
	border: 1px solid rgba(225, 230, 237, 0.9);
	border-radius: 9px;
	background: #fff;
	box-shadow: none;
}

.tvh-nav__item.is-active .tvh-nav__icon,
.tvh-nav__item[aria-current="page"] .tvh-nav__icon {
	border-color: #d8dcff;
	background: #fff;
	color: var(--tvh-primary);
}

.tvh-sidebar__footer {
	gap: 9px;
	margin-top: auto;
	padding: 14px 6px 3px;
	border-top-color: var(--tvh-border);
}

.tvh-sidebar__account {
	padding: 6px;
	border-radius: 11px;
}

.tvh-sidebar__account:hover {
	background: var(--tvh-surface-soft);
}

.tvh-user-avatar,
.tvh-user-pill__avatar {
	background: #eceeff;
	color: var(--tvh-primary-hover);
}

.tvh-sidebar__user-text strong {
	font-weight: 700;
}

.tvh-sidebar__logout {
	min-height: 40px;
	border-radius: 10px;
	font-weight: 620;
}

.tvh-sidebar__logout:hover {
	background: var(--tvh-danger-soft);
}

.tvh-topbar {
	position: sticky;
	top: 0;
	z-index: 35;
	min-height: 74px;
	padding: 14px clamp(20px, 3vw, 42px);
	border-bottom: 1px solid rgba(225, 230, 237, 0.92);
	background: rgba(246, 247, 249, 0.9);
	backdrop-filter: blur(18px);
}

.tvh-topbar__title {
	gap: 11px;
}

.tvh-breadcrumb {
	color: #687484;
	font-size: 10px;
	font-weight: 680;
	letter-spacing: 0.03em !important;
}

.tvh-topbar h1 {
	max-width: min(62vw, 760px);
	font-size: clamp(20px, 1.55vw, 25px);
	font-weight: 750;
	letter-spacing: -0.035em !important;
}

.tvh-topbar__description {
	color: var(--tvh-muted);
	font-size: 12px;
}

.tvh-topbar__actions {
	gap: 8px;
}

.tvh-user-pill {
	min-height: 40px;
	border-color: var(--tvh-border);
	border-radius: var(--tvh-radius-pill);
	background: var(--tvh-surface);
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-user-pill__name {
	font-size: 12px;
	font-weight: 650;
}

.tvh-main {
	width: min(100%, var(--tvh-content-width));
	padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 42px) 44px;
	gap: 24px;
	background: var(--tvh-bg);
}

.tvh-page-head,
.tvh-toolbar {
	align-items: center;
	gap: 18px;
	padding: 0;
}

.tvh-page-head h2,
.tvh-detail-head h2 {
	font-size: clamp(23px, 2vw, 30px);
	font-weight: 760;
	letter-spacing: -0.04em !important;
}

.tvh-eyebrow {
	margin-bottom: 6px;
	color: #8b95a2;
	font-size: 10px;
	font-weight: 760;
	letter-spacing: 0.1em !important;
}

.tvh-muted {
	color: var(--tvh-muted);
}

/* Controls -------------------------------------------------------------- */

input,
select,
textarea {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	border: 1px solid var(--tvh-border);
	border-radius: 10px;
	background: var(--tvh-surface);
	color: var(--tvh-text);
	padding: 10px 12px;
	outline: none;
	font-size: 13px;
	line-height: 1.4;
	transition: border-color var(--tvh-transition), box-shadow var(--tvh-transition), background-color var(--tvh-transition);
}

input::placeholder,
textarea::placeholder {
	color: #687484;
	opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
	border-color: #c8d1dd;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--tvh-primary);
	box-shadow: var(--tvh-focus);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
	opacity: 0.58;
}

textarea {
	line-height: 1.55;
}

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 18px;
	padding: 0;
	accent-color: var(--tvh-primary);
}

input[type="color"] {
	min-height: 42px;
	padding: 4px;
}

input[type="file"] {
	padding: 7px 8px;
}

input[type="file"]::file-selector-button {
	margin-right: 9px;
	border: 0;
	border-radius: 7px;
	background: var(--tvh-surface-soft);
	color: var(--tvh-text-soft);
	padding: 7px 10px;
	font-weight: 650;
}

.tvh-button,
.tvh-icon-button,
.tvh-link-button,
.tvh-task-row-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	border: 1px solid var(--tvh-border);
	border-radius: 10px;
	background: var(--tvh-surface);
	color: var(--tvh-text-soft);
	padding: 9px 14px;
	box-shadow: var(--tvh-shadow-xs);
	font-size: 12px;
	font-weight: 680;
	line-height: 1.25;
	text-decoration: none;
	transition: color var(--tvh-transition), border-color var(--tvh-transition), background-color var(--tvh-transition), box-shadow var(--tvh-transition), transform var(--tvh-transition);
}

.tvh-button:hover,
.tvh-icon-button:hover,
.tvh-link-button:hover,
.tvh-task-row-action:hover {
	border-color: #c7d0dc;
	background: var(--tvh-surface-hover);
	color: var(--tvh-text);
	box-shadow: var(--tvh-shadow-sm);
	transform: translateY(-1px);
}

.tvh-button:active,
.tvh-icon-button:active,
.tvh-link-button:active,
.tvh-task-row-action:active {
	transform: translateY(0);
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-button--primary,
.tvh-icon-button--primary {
	border-color: var(--tvh-primary);
	background: var(--tvh-primary);
	color: #fff;
	box-shadow: 0 7px 17px rgba(79, 70, 216, 0.2);
}

.tvh-button--primary:hover,
.tvh-icon-button--primary:hover {
	border-color: var(--tvh-primary-hover);
	background: var(--tvh-primary-hover);
	color: #fff;
}

.tvh-button--ghost {
	background: transparent;
	box-shadow: none;
}

.tvh-button--ghost:hover {
	background: var(--tvh-surface);
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-button--danger,
.tvh-icon-button--danger {
	border-color: #f0cdd2;
	background: var(--tvh-danger-soft);
	color: var(--tvh-danger);
}

.tvh-button--danger:hover,
.tvh-icon-button--danger:hover {
	border-color: #e6aeb7;
	background: #fae1e5;
	color: #a63d4b;
}

.tvh-icon-button {
	width: 40px;
	min-width: 40px;
	padding: 0;
}

.tvh-button .tvh-lucide,
.tvh-icon-button .tvh-lucide,
.tvh-dropdown__item .tvh-lucide {
	width: 17px;
	height: 17px;
}

.tvh-actions,
.tvh-topbar__actions,
.tvh-row-actions,
.tvh-check-row {
	gap: 8px;
}

.tvh-filter,
.tvh-search-form {
	gap: 10px;
	margin-bottom: 18px;
}

.tvh-form,
.tvh-form-grid {
	gap: 16px;
}

.tvh-form label,
.tvh-inline-edit label {
	gap: 7px;
	color: var(--tvh-text-soft);
	font-size: 12px;
	font-weight: 680;
}

.tvh-form label small {
	color: var(--tvh-muted);
	font-size: 11px;
	font-weight: 470;
}

/* Surfaces, lists and data ------------------------------------------------ */

.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-ai-bubble {
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius);
	background: var(--tvh-surface);
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-panel {
	padding: clamp(18px, 2vw, 26px);
}

.tvh-panel__head,
.tvh-widget-head {
	gap: 12px;
	margin-bottom: 18px;
}

.tvh-panel__head h3,
.tvh-note-card h3,
.tvh-panel > h3,
.tvh-widget-head h3 {
	font-size: 16px;
	font-weight: 720;
	letter-spacing: -0.02em !important;
}

.tvh-grid {
	gap: 18px;
}

.tvh-grid--4,
.tvh-metric-grid {
	gap: 14px;
}

.tvh-metric {
	min-height: 116px;
	padding: 18px;
	background: linear-gradient(145deg, #fff 0%, #fbfcff 100%);
	overflow: hidden;
}

.tvh-metric::after {
	display: block;
	inset: auto -28px -32px auto;
	width: 92px;
	height: 92px;
	background: var(--tvh-primary-soft);
	opacity: 0.7;
}

.tvh-metric span {
	color: var(--tvh-muted);
	font-size: 11px;
	font-weight: 620;
}

.tvh-metric strong {
	margin-top: 9px;
	font-size: clamp(22px, 2vw, 29px);
	font-weight: 760;
	letter-spacing: -0.035em !important;
}

.tvh-metric--income::after {
	background: var(--tvh-success-soft);
}

.tvh-metric--expense::after,
.tvh-metric--danger::after {
	background: var(--tvh-danger-soft);
}

.tvh-table-wrap {
	border-color: var(--tvh-border);
	border-radius: 12px;
	background: var(--tvh-surface);
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-table {
	min-width: 720px;
}

.tvh-table th,
.tvh-table td {
	padding: 13px 15px;
	border-bottom-color: var(--tvh-border);
}

.tvh-table th {
	background: #fafbfc;
	color: #687484;
	font-size: 10px;
	font-weight: 760;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
}

.tvh-table tbody tr:hover {
	background: #fafbff;
}

.tvh-table td {
	color: var(--tvh-text-soft);
	font-size: 13px;
}

.tvh-table td strong {
	color: var(--tvh-text);
	font-weight: 700;
}

.tvh-list {
	gap: 0;
}

.tvh-list__item {
	min-height: 52px;
	padding: 13px 0;
	border-bottom-color: var(--tvh-border);
}

.tvh-list__item strong {
	font-weight: 680;
}

.tvh-list__item small {
	color: var(--tvh-muted);
}

.tvh-chip,
.tvh-badge,
.tvh-due-chip,
.tvh-task-meta {
	min-height: 26px;
	border: 1px solid var(--tvh-border);
	border-radius: var(--tvh-radius-pill);
	background: var(--tvh-surface-soft);
	color: var(--tvh-text-soft);
	padding: 5px 9px;
	font-size: 10px;
	font-weight: 680;
	line-height: 1.15;
}

.tvh-chip:hover {
	border-color: #c9cdfa;
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
}

.tvh-badge--status-doing,
.tvh-badge--priority-high {
	border-color: #cdd1ff;
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
}

.tvh-badge--status-done,
.tvh-badge--status-active,
.tvh-badge--priority-low {
	border-color: #c9ead9;
	background: var(--tvh-success-soft);
	color: var(--tvh-success);
}

.tvh-badge--status-cancelled,
.tvh-badge--priority-urgent {
	border-color: #f1cbd1;
	background: var(--tvh-danger-soft);
	color: var(--tvh-danger);
}

.tvh-badge--status-waiting,
.tvh-badge--priority-medium {
	border-color: #f0ddb2;
	background: var(--tvh-warning-soft);
	color: var(--tvh-warning);
}

.tvh-progress,
.tvh-bar {
	background: #edf0f4;
}

.tvh-progress i,
.tvh-bar i {
	background: linear-gradient(90deg, #5d64e7, var(--tvh-primary));
}

.tvh-empty {
	border: 1px dashed var(--tvh-border-strong);
	border-radius: 11px;
	background: #fafbfc;
	color: var(--tvh-muted);
	padding: 18px;
}

.tvh-alert,
.tvh-flash {
	box-shadow: none;
	padding: 12px 15px;
	font-size: 12px;
}

.tvh-alert--success,
.tvh-flash--success {
	border-color: #c9ead9;
	background: var(--tvh-success-soft);
	color: #236c4d;
}

.tvh-alert--warning,
.tvh-flash--warning {
	border-color: #f0ddb2;
	background: var(--tvh-warning-soft);
	color: #815516;
}

.tvh-alert--error,
.tvh-flash--error {
	border-color: #f1cbd1;
	background: var(--tvh-danger-soft);
	color: #9d3d4b;
}

.tvh-alert--info,
.tvh-flash--info {
	border-color: #cce0f4;
	background: var(--tvh-info-soft);
	color: #2d639a;
}

/* Dashboard, notes, tasks and workbooks --------------------------------- */

.tvh-dashboard-greeting {
	padding: 4px 0 2px;
}

.tvh-dashboard-greeting h2 {
	max-width: 760px;
	font-size: clamp(25px, 3vw, 36px);
	letter-spacing: -0.05em !important;
}

.tvh-dashboard-grid,
.tvh-notes-workspace,
.tvh-task-workspace,
.tvh-project-workspace-grid {
	gap: 18px;
}

.tvh-dashboard-widget,
.tvh-widget,
.tvh-quick-capture,
.tvh-notes-rail,
.tvh-notes-list,
.tvh-note-side,
.tvh-task-column,
.tvh-task-list-view,
.tvh-password-workbook,
.tvh-companies-panel {
	border-color: var(--tvh-border);
	border-radius: var(--tvh-radius);
	background: var(--tvh-surface);
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-quick-capture,
.tvh-capture-hero {
	background: linear-gradient(135deg, #ffffff 0%, #f8f8ff 100%);
}

.tvh-dashboard-capture__input input,
.tvh-dashboard-capture__input textarea {
	border-color: #d9ddfb;
	background: #fff;
}

.tvh-note-card,
.tvh-project-workspace-card,
.tvh-task-card,
.tvh-kanban__card {
	border-color: var(--tvh-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-note-card:hover,
.tvh-project-workspace-card:hover,
.tvh-task-card:hover,
.tvh-kanban__card:hover {
	border-color: #cdd2f8;
	box-shadow: var(--tvh-shadow-sm);
	transform: translateY(-2px);
}

.tvh-note-card::before {
	border-radius: var(--tvh-radius-pill);
}

.tvh-note-card__meta,
.tvh-note-card__tags,
.tvh-task-card__foot,
.tvh-project-workspace-card__stats {
	color: var(--tvh-muted);
}

.tvh-note-search input,
.tvh-task-toolbar__search input {
	background: #fafbfc;
}

.tvh-note-group,
.tvh-note-chip-cloud a,
.tvh-note-tag-cloud a {
	border-radius: 10px;
}

.tvh-note-group:hover,
.tvh-note-group.is-active {
	border-color: #d9ddfb;
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
}

.tvh-note-preview,
.tvh-note-editor,
.tvh-note-daily {
	border-color: var(--tvh-border);
	border-radius: var(--tvh-radius);
	background: #fff;
}

.tvh-task-column__head,
.tvh-task-toolbar,
.tvh-password-workbook__top {
	border-color: var(--tvh-border);
}

.tvh-task-column__cards {
	gap: 10px;
}

.tvh-calendar {
	gap: 8px;
}

.tvh-calendar__dow {
	color: #687484;
	font-size: 10px;
	font-weight: 760;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
}

.tvh-calendar__cell {
	min-height: 86px;
	padding: 10px;
	background: #fff;
}

.tvh-calendar__cell:hover,
.tvh-calendar__cell.is-selected {
	border-color: #cdd2f8;
	background: var(--tvh-primary-soft);
}

.tvh-password-tabs,
.tvh-segmented {
	border-color: var(--tvh-border);
	border-radius: 10px;
	background: var(--tvh-surface-soft);
}

.tvh-segmented span {
	border-radius: 8px;
}

.tvh-segmented input:checked + span {
	border-color: #d6d9fb;
	background: #fff;
	color: var(--tvh-primary-hover);
	box-shadow: var(--tvh-shadow-xs);
}

/* Menus, dialogs and overlays ------------------------------------------- */

.tvh-dropdown {
	gap: 3px;
	padding: 6px;
	border-color: var(--tvh-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--tvh-shadow);
}

.tvh-dropdown__item {
	min-height: 40px;
	border-radius: 8px;
	color: var(--tvh-text-soft);
	font-size: 12px;
}

.tvh-dropdown__item:hover,
.tvh-dropdown__item:focus-visible {
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
}

.tvh-task-drawer__overlay,
.tvh-task-form-modal__overlay,
.tvh-chat-modal__backdrop {
	background: rgba(28, 39, 53, 0.42);
	backdrop-filter: blur(2px);
}

.tvh-task-drawer__panel,
.tvh-task-form-modal__panel,
.tvh-chat-modal__panel,
.tvh-bottom-sheet__panel {
	border: 1px solid var(--tvh-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 64px rgba(28, 39, 53, 0.18);
}

.tvh-task-drawer__head,
.tvh-task-form-modal__head,
.tvh-chat-modal__head {
	border-bottom-color: var(--tvh-border);
}

/* Chat / personal notes -------------------------------------------------- */

.tvh-app[data-page="chat"] .tvh-main {
	gap: 18px;
}

.tvh-app[data-page="chat"] .tvh-page-head h2 {
	font-size: clamp(22px, 2vw, 29px);
}

.tvh-chat-workspace {
	--tvh-chat-ink: #202630;
	--tvh-chat-muted: #687484;
	--tvh-chat-line: #e1e6ed;
	--tvh-chat-soft: #f5f7fb;
	--tvh-chat-teal: #4f46d8;
	--tvh-chat-teal-dark: #4038b8;
	grid-template-columns: minmax(216px, 252px) minmax(0, 1fr) minmax(230px, 270px);
	gap: 16px;
	min-height: min(720px, calc(100vh - 188px));
}

.tvh-chat-threads,
.tvh-chat-panel,
.tvh-chat-aside-card,
.tvh-chat-today-link {
	border: 1px solid var(--tvh-chat-line);
	border-radius: var(--tvh-radius-lg);
	background: #fff;
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-chat-threads__head {
	padding: 19px 17px 15px;
	border-bottom-color: var(--tvh-chat-line);
	background: linear-gradient(145deg, #fff 0%, #f8f8ff 100%);
}

.tvh-chat-identity strong {
	color: var(--tvh-chat-ink);
	font-size: 13px;
	font-weight: 730;
}

.tvh-chat-identity small,
.tvh-chat-thread__copy small {
	color: var(--tvh-chat-muted);
	font-size: 10px;
}

.tvh-chat-avatar,
.tvh-chat-thread__avatar {
	background: linear-gradient(145deg, #6974e8, #4f46d8);
	box-shadow: 0 7px 15px rgba(79, 70, 216, 0.19);
}

.tvh-chat-identity small i {
	background: var(--tvh-success);
}

.tvh-chat-search input {
	min-height: 40px;
	border-color: var(--tvh-border);
	border-radius: 10px;
	background: #fafbfc;
}

.tvh-chat-search .tvh-lucide,
.tvh-chat-panel__actions .tvh-icon-button,
.tvh-chat-message__action,
.tvh-chat-thread-row__actions a,
.tvh-chat-thread-row__actions button,
.tvh-chat-active-filter > a,
.tvh-chat-active-filter b {
	color: #687484;
}

.tvh-chat-thread-list {
	gap: 4px;
	padding: 12px 10px;
}

.tvh-chat-thread {
	min-height: 60px;
	border-radius: 11px;
	color: var(--tvh-chat-ink);
}

.tvh-chat-thread:hover,
.tvh-chat-thread:focus-visible {
	border-color: #d9ddfb;
	background: #f7f7ff;
	color: var(--tvh-chat-ink);
	transform: translateX(1px);
}

.tvh-chat-thread.is-active,
.tvh-chat-thread-row.is-active > .tvh-chat-thread {
	border-color: #d7dafb;
	background: linear-gradient(110deg, #eef0ff, #f8f8ff);
	box-shadow: inset 3px 0 var(--tvh-primary);
}

.tvh-chat-thread__icon {
	border: 1px solid #dfe2fb;
	background: #f0f1ff;
	color: var(--tvh-primary);
}

.tvh-chat-thread__avatar {
	background: linear-gradient(145deg, #6974e8, #4f46d8);
}

.tvh-chat-threads__foot {
	border-top-color: var(--tvh-chat-line);
}

.tvh-chat-manage-link,
.tvh-chat-tool-button,
.tvh-chat-today-link {
	color: var(--tvh-text-soft);
}

.tvh-chat-manage-link:hover,
.tvh-chat-tool-button:hover {
	background: var(--tvh-primary-soft);
	color: var(--tvh-primary-hover);
}

.tvh-chat-panel__head {
	min-height: 68px;
	padding: 13px 18px;
	border-bottom-color: var(--tvh-chat-line);
	background: #fff;
}

.tvh-chat-messages {
	background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
	background-color: #fff;
}

.tvh-chat-date {
	border-color: var(--tvh-chat-line);
	background: #fff;
	color: #687484;
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-chat-message__bubble {
	border: 1px solid #d5d8fb;
	border-radius: 15px 15px 5px 15px;
	background: linear-gradient(145deg, #f0f1ff 0%, #e9ebff 100%);
	color: #2d3266;
	box-shadow: var(--tvh-shadow-xs);
}

.tvh-chat-message--outgoing .tvh-chat-message__bubble,
.tvh-chat-message.is-own .tvh-chat-message__bubble {
	border-color: #d5d8fb;
	border-radius: 15px 15px 5px 15px;
	background: linear-gradient(145deg, #f0f1ff 0%, #e9ebff 100%);
	color: #2d3266;
}

.tvh-chat-message__meta,
.tvh-chat-composer__tools,
.tvh-chat-save-note,
.tvh-chat-date,
.tvh-chat-privacy {
	color: #687484;
}

.tvh-chat-composer {
	border-top-color: var(--tvh-chat-line);
	background: rgba(255, 255, 255, 0.96);
}

.tvh-chat-composer__field {
	border-color: #d9deea;
	border-radius: 13px;
	background: #fafbfc;
}

.tvh-chat-composer__field:focus-within {
	border-color: var(--tvh-primary);
	box-shadow: var(--tvh-focus);
}

.tvh-chat-send {
	border-color: var(--tvh-primary);
	background: var(--tvh-primary);
	box-shadow: 0 8px 18px rgba(79, 70, 216, 0.22);
}

.tvh-chat-send:hover {
	border-color: var(--tvh-primary-hover);
	background: var(--tvh-primary-hover);
}

.tvh-chat-aside-card {
	padding: 17px;
}

.tvh-chat-aside-card h3 {
	font-size: 13px;
	font-weight: 720;
}

.tvh-chat-today-link:hover,
.tvh-chat-today-link:focus-visible {
	border-color: #d8dcfb;
	background: #f8f8ff;
}

.tvh-chat-today-link > span:first-child {
	background: var(--tvh-success-soft);
	color: var(--tvh-success);
}

.tvh-chat-modal__panel input,
.tvh-chat-modal__panel select,
.tvh-chat-modal__panel textarea {
	background: #fafbfc;
}

/* Login / public gate ---------------------------------------------------- */

.tvh-login {
	min-height: 100dvh;
	padding: 32px 20px;
	background:
		radial-gradient(circle at 15% 12%, rgba(105, 116, 232, 0.13), transparent 32%),
		radial-gradient(circle at 88% 90%, rgba(79, 70, 216, 0.08), transparent 34%),
		var(--tvh-bg);
	color: var(--tvh-text);
}

.tvh-login__panel {
	width: min(100%, 456px);
}

.tvh-login__card {
	gap: 21px;
	padding: clamp(26px, 5vw, 38px);
	border: 1px solid rgba(225, 230, 237, 0.95);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 20px 60px rgba(28, 39, 53, 0.11);
}

.tvh-login__head h1 {
	font-size: clamp(28px, 4vw, 34px);
	font-weight: 760;
	letter-spacing: -0.05em !important;
}

.tvh-login__form label {
	color: var(--tvh-text-soft);
	font-size: 12px;
}

.tvh-login__form input[type="password"],
.tvh-login__form input[type="text"] {
	min-height: 48px;
	border-color: var(--tvh-border);
	background: #fafbfc;
}

.tvh-login__remember {
	color: var(--tvh-muted) !important;
}

.tvh-login__submit {
	min-height: 48px;
	border: 1px solid var(--tvh-primary);
	border-radius: 11px;
	background: var(--tvh-primary);
	box-shadow: 0 8px 18px rgba(79, 70, 216, 0.2);
}

.tvh-login__submit:hover,
.tvh-login__submit:focus-visible {
	background: var(--tvh-primary-hover);
}

.tvh-login__notice {
	border-radius: 10px;
}

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

@media (min-width: 1200px) {
	.tvh-main {
		padding-inline: clamp(28px, 3.2vw, 48px);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.tvh-app {
		grid-template-columns: var(--tvh-sidebar-collapsed-width) minmax(0, 1fr);
	}

	.tvh-sidebar {
		width: var(--tvh-sidebar-collapsed-width);
		padding-inline: 8px;
	}

	.tvh-topbar {
		padding-inline: 20px;
	}

	.tvh-main {
		padding-inline: 20px;
	}

	.tvh-chat-workspace {
		grid-template-columns: minmax(190px, 228px) minmax(0, 1fr);
	}

	.tvh-chat-aside {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.tvh-grid--3,
	.tvh-grid--4,
	.tvh-metric-grid,
	.tvh-grid--wide-left {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tvh-page-head h2,
	.tvh-detail-head h2 {
		font-size: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--tvh-radius: 12px;
		--tvh-radius-lg: 15px;
		--tvh-mobile-nav-height: 74px;
	}

	body {
		font-size: 14px;
	}

	.tvh-topbar {
		min-height: 62px;
		padding: 8px 11px;
		background: rgba(246, 247, 249, 0.96);
	}

	.tvh-topbar h1 {
		max-width: 46vw;
		font-size: 18px;
	}

	.tvh-topbar__actions {
		gap: 5px;
	}

	.tvh-main {
		width: 100%;
		padding: 16px 12px calc(var(--tvh-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 20px);
		gap: 16px;
	}

	.tvh-page-head {
		align-items: flex-start;
		gap: 10px;
	}

	.tvh-page-head h2,
	.tvh-detail-head h2 {
		font-size: 23px;
	}

	.tvh-page-head .tvh-actions,
	.tvh-page-head .tvh-button {
		width: 100%;
	}

	.tvh-actions .tvh-button {
		min-height: 42px;
	}

	.tvh-grid--2,
	.tvh-grid--3,
	.tvh-grid--4,
	.tvh-metric-grid,
	.tvh-grid--wide-left {
		grid-template-columns: minmax(0, 1fr);
	}

	.tvh-panel {
		padding: 16px;
	}

	.tvh-filter,
	.tvh-search-form,
	.tvh-filter--inline {
		grid-template-columns: minmax(0, 1fr);
	}

	.tvh-table-wrap {
		border-radius: 10px;
	}

	.tvh-table {
		min-width: 680px;
	}

	.tvh-metric {
		min-height: 100px;
	}

	.tvh-mobile-nav {
		border-top-color: var(--tvh-border);
		background: rgba(255, 255, 255, 0.97);
		box-shadow: 0 -10px 28px rgba(28, 39, 53, 0.09);
	}

	.tvh-mobile-nav__item {
		border-radius: 11px;
		color: #687484;
	}

	.tvh-mobile-nav__item:hover,
	.tvh-mobile-nav__item:focus-visible {
		background: var(--tvh-surface-soft);
		color: var(--tvh-text);
	}

	.tvh-mobile-nav__item.is-active,
	.tvh-mobile-nav__item[aria-current="page"] {
		background: var(--tvh-primary-soft);
		color: var(--tvh-primary-hover);
	}

	.tvh-bottom-sheet__panel {
		border-radius: 18px 18px 0 0;
	}

	.tvh-chat-workspace {
		display: flex;
		flex-direction: column;
		min-height: 0;
		gap: 12px;
	}

	.tvh-chat-panel {
		order: 1;
	}

	.tvh-chat-threads {
		order: 2;
	}

	.tvh-chat-aside {
		order: 3;
		grid-template-columns: minmax(0, 1fr);
	}

	.tvh-chat-panel__head {
		min-height: 64px;
		padding-inline: 13px;
	}

	.tvh-chat-messages {
		min-height: 380px;
		max-height: 58vh;
		padding-inline: 13px;
	}

	.tvh-chat-message__bubble {
		max-width: 90%;
	}

	.tvh-chat-composer {
		padding: 10px 10px 12px;
	}

	.tvh-chat-send {
		width: 44px;
		height: 44px;
		border-radius: 13px;
	}
}

@media (max-width: 480px) {
	.tvh-login {
		padding: 18px 12px;
	}

	.tvh-login__card {
		padding: 24px 20px;
		border-radius: 16px;
	}

	.tvh-chat-thread-list {
		max-height: none;
	}

	.tvh-chat-message__bubble {
		max-width: 93%;
	}
}

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

@media (forced-colors: active) {
	.tvh-panel,
	.tvh-button,
	.tvh-icon-button,
	.tvh-table-wrap,
	.tvh-chat-threads,
	.tvh-chat-panel,
	.tvh-chat-aside-card,
	.tvh-chat-message__bubble,
	.tvh-chat-composer__field,
	.tvh-login__card {
		border: 1px solid CanvasText;
		box-shadow: none;
	}

	.tvh-button--primary,
	.tvh-icon-button--primary,
	.tvh-chat-send,
	.tvh-login__submit {
		border: 1px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
	}
}