/* Műszer arculat (Áron, 2026-10-18; docs/ARCULAT.md): alumínium munkafelület, grafit, lime LED. */
/* HelloProVision ügyfélportál — 4 fő hely felső menüvel (telefonon alsó sávval), fülek, világos munkaterület,
   lime kiemelés csak a fő gombon. Betű: Satoshi cím, Inter szöveg (helyi woff2). */

@font-face { font-family: "HPV Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "HPV Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "HPV Satoshi"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/satoshi-700.woff2") format("woff2"); }

.hpv-portal-body {
	margin: 0;
	background: #e9e8e3;
	font-family: "HPV Inter", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

.hpv-portal,
.hpv-login {
	--p-accent: #b8ff34;
	--p-accent-soft: #eaf8cf;
	--p-accent-ink: #3d6b00;
	--p-ink: #1b1b19;
	--p-ink-2: #3a3a36;
	--p-muted: #6a6862;
	--p-line: #d3d1ca;
	--p-line-2: #e2e0da;
	--p-bg: #e9e8e3;
	--p-soft: #efeee9;
	--p-card: #f6f5f1;
	--p-side: #23241f;
	--p-alert: #c4320a;
	--p-head: "HPV Satoshi", "Satoshi", "HPV Inter", "Inter", ui-sans-serif, system-ui, sans-serif;
	--p-ease: cubic-bezier(.2, .8, .2, 1);
	--p-bar: 0px; /* telefonon az alsó sáv magassága */

	color: var(--p-ink);
	font-size: 15px;
	line-height: 1.5;
}

.hpv-portal *,
.hpv-login * {
	box-sizing: border-box;
}

.hpv-portal {
	min-height: 100vh;
	background: var(--p-bg);
}

.hpv-portal h1,
.hpv-portal h2,
.hpv-portal h3 {
	margin: 0;
	color: inherit;
	font-family: var(--p-head);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.hpv-portal a {
	color: inherit;
}

.hpv-portal :focus-visible {
	outline: 2px solid var(--p-ink);
	outline-offset: 2px;
	border-radius: 6px;
}

.hpv-muted {
	color: var(--p-muted);
}

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

.hpv-skip {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--p-ink);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}

.hpv-skip:focus {
	top: 12px;
}

.hpv-preview-bar {
	position: fixed;
	right: 16px;
	bottom: calc(16px + var(--p-bar));
	z-index: 50;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 6px;
	background: #fff3cf;
	color: #5c4000;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	font-size: 13px;
}

/* ── Fejléc: márka · 4 hub · felhasználó ────────── */

.hpv-top {
	position: relative;
	z-index: 30;
	border-bottom: 1px solid var(--p-line);
	background: var(--p-card);
}

.hpv-top__in {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1280px;
	height: 68px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 40px);
}

.hpv-brand {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--p-ink) !important;
	text-decoration: none;
}

.hpv-brand__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--p-ink);
}

.hpv-brand__mark i {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--p-accent);
}

.hpv-brand__name {
	display: grid;
	min-width: 0;
	font-family: var(--p-head);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.hpv-brand__name small {
	color: var(--p-muted);
	font-family: "HPV Inter", "Inter", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
}

.hpv-brand__name--client {
	display: none;
}

/* A bejelentkező lap márkája (középre, felirattal). */
.hpv-brand--center {
	display: grid;
	justify-items: center;
	margin-bottom: 18px;
	color: var(--p-ink) !important;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.hpv-brand--center span {
	color: var(--p-accent-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hpv-hubs {
	display: flex;
	align-self: stretch;
	gap: 2px;
}

.hpv-hub {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	border-bottom: 2px solid transparent;
	color: #55554f !important;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s var(--p-ease), border-color .15s var(--p-ease);
}

.hpv-hub:hover {
	color: var(--p-ink) !important;
}

.hpv-hub.is-active {
	border-bottom-color: var(--p-ink);
	color: var(--p-ink) !important;
}

.hpv-hub__icon {
	display: none;
}

.hpv-hub__icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.hpv-hub__count,
.hpv-tab__count {
	display: inline-grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--p-alert);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.hpv-count {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--p-ink);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
}

/* Felhasználó: név és cég, rákattintva Fiók, nyelv, kijelentkezés. */
.hpv-me {
	position: relative;
	margin-left: auto;
}

.hpv-me summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--p-line);
	border-radius: 999px;
	background: var(--p-card);
	cursor: pointer;
	list-style: none;
	transition: border-color .15s var(--p-ease);
}

.hpv-me summary::-webkit-details-marker {
	display: none;
}

.hpv-me summary:hover,
.hpv-me[open] summary,
.hpv-me.is-active summary {
	border-color: #c9c9c1;
}

.hpv-me__who {
	display: grid;
	min-width: 0;
	max-width: 220px;
	line-height: 1.25;
}

.hpv-me__who strong,
.hpv-me__who small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hpv-me__who strong {
	font-size: 13.5px;
}

.hpv-me__who small {
	color: var(--p-muted);
	font-size: 12px;
}

.hpv-me__chev svg {
	display: block;
	width: 16px;
	height: 16px;
	color: var(--p-muted);
	transition: transform .2s var(--p-ease);
}

.hpv-me[open] .hpv-me__chev svg {
	transform: rotate(180deg);
}

.hpv-me__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	display: grid;
	gap: 2px;
	width: 260px;
	padding: 8px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-card);
	box-shadow: 0 16px 40px rgba(18, 18, 18, .12);
	animation: hpv-pop .18s var(--p-ease);
}

@keyframes hpv-pop {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

.hpv-me__head {
	display: none;
	margin: 0;
	padding: 8px 10px 10px;
	border-bottom: 1px solid var(--p-line-2);
	line-height: 1.3;
}

.hpv-me__head strong,
.hpv-me__head small {
	display: block;
}

.hpv-me__head small {
	color: var(--p-muted);
	font-size: 12.5px;
}

/* Ügyfélváltó (több ügyfeles fiók) */
.hpv-me__switch { display: grid; gap: 2px; padding: 6px 0 8px; border-bottom: 1px solid var(--p-line-2); margin-bottom: 4px; }
.hpv-me__switch small { color: var(--p-muted); font-size: 12px; padding: 0 10px 2px; }
.hpv-me__switch a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 40px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.hpv-me__switch a:hover { background: var(--p-line-2); }
.hpv-me__switch a svg { transform: rotate(-90deg); width: 14px; height: 14px; opacity: .6; }

.hpv-me__menu > a,
.hpv-me__lang {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 10px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.hpv-me__menu > a:hover {
	background: var(--p-soft);
}

.hpv-me__menu > a[aria-current] {
	background: var(--p-soft);
	font-weight: 650;
}

.hpv-me__menu svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--p-muted);
}

.hpv-me__lang {
	margin: 4px 0;
	border-top: 1px solid var(--p-line-2);
	border-bottom: 1px solid var(--p-line-2);
	border-radius: 0;
}

.hpv-me__lang a {
	padding: 5px 10px;
	border-radius: 999px;
	color: var(--p-muted) !important;
	font-size: 13.5px;
	text-decoration: none;
}

.hpv-me__lang a:hover {
	color: var(--p-ink) !important;
}

.hpv-me__lang a[aria-current] {
	background: var(--p-ink);
	color: #fff !important;
	font-weight: 600;
}

.hpv-me__out {
	color: var(--p-ink-2) !important;
}

.hpv-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	overflow: hidden;
	border-radius: 50%;
	background: #dfe9cf;
	color: var(--p-ink);
	font-size: 12px;
	font-weight: 750;
}

.hpv-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hpv-avatar--soft {
	background: #e8e8e1;
}

/* ── Hub fejléc és fülek ────────────────────────── */

.hpv-hubhead {
	margin-bottom: 20px;
}

.hpv-hubhead h1 {
	margin-bottom: 14px;
	font-size: clamp(26px, 3vw, 32px);
}

.hpv-hubhead.is-detail {
	margin-bottom: 18px;
}

.hpv-tabs {
	position: relative;
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--p-line);
}

.hpv-tab {
	display: flex;
	flex: none;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	margin-bottom: -1px;
	padding: 0 14px;
	border-bottom: 2px solid transparent;
	color: var(--p-muted) !important;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s var(--p-ease), border-color .15s var(--p-ease);
}

.hpv-tab:hover {
	color: var(--p-ink) !important;
}

.hpv-tab.is-active {
	border-bottom-color: var(--p-ink);
	color: var(--p-ink) !important;
}

.hpv-head--tab {
	margin-bottom: 18px;
}

.hpv-head--tab .hpv-muted {
	margin: 0;
	font-size: 14.5px;
}

/* ── Munkaterület ───────────────────────────────── */

.hpv-main {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px clamp(16px, 3vw, 40px) 64px;
}

.hpv-main:focus {
	outline: 0;
}

.hpv-head {
	display: grid;
	gap: 6px;
	margin-bottom: 24px;
}

.hpv-head h1 {
	font-size: clamp(26px, 3.2vw, 34px);
}

.hpv-back {
	color: var(--p-muted) !important;
	font-size: 14px;
	text-decoration: none;
}

.hpv-panel {
	margin-bottom: 16px;
	padding: 22px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-card);
}

.hpv-panel h2 {
	margin-bottom: 14px;
	font-size: 17px;
}

.hpv-empty {
	color: var(--p-muted);
}

.hpv-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.hpv-stat {
	display: grid;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-card);
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}

.hpv-stat:hover {
	border-color: #c9c9c1;
	transform: translateY(-1px);
}

.hpv-stat span {
	color: var(--p-muted);
	font-size: 13px;
}

.hpv-stat strong {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -.03em;
}

.hpv-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.hpv-columns .hpv-panel {
	margin-bottom: 0;
}

.hpv-columns + .hpv-panel {
	margin-top: 16px;
}

.hpv-todo {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hpv-todo a {
	display: grid;
	gap: 2px;
	padding: 12px 14px 12px 16px;
	border-left: 3px solid var(--p-accent);
	border-radius: 4px 12px 12px 4px;
	background: var(--p-bg);
	text-decoration: none;
}

.hpv-todo li.is-alert a {
	border-left-color: #e5484d;
	background: #fff4f3;
}

.hpv-todo span {
	color: var(--p-muted);
	font-size: 13px;
}

.hpv-feed {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hpv-feed li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--p-line);
}

.hpv-feed li:first-child {
	border-top: 0;
}

.hpv-feed time {
	flex: none;
	color: var(--p-muted);
	font-size: 13px;
}

.hpv-mini-project,
.hpv-card-link {
	display: grid;
	gap: 8px;
	padding: 14px 0;
	border-top: 1px solid var(--p-line);
	text-decoration: none;
}

.hpv-mini-project:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.hpv-mini-project__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hpv-mini-project small,
.hpv-card-link small {
	color: var(--p-muted);
}

.hpv-bar {
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: #ecebe6;
}

.hpv-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--p-ink);
}

.hpv-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
}

.hpv-cards .hpv-card-link {
	padding: 20px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-card);
	transition: border-color .15s, transform .15s;
}

.hpv-cards a.hpv-card-link:hover {
	border-color: #c9c9c1;
	transform: translateY(-1px);
}

.hpv-service__price {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.hpv-service__price small {
	color: var(--p-muted);
	font-size: 14px;
	font-weight: 400;
}

/* ── Státusz címkék ─────────────────────────────── */

.hpv-pill {
	display: inline-block;
	flex: none;
	padding: 3px 10px;
	border-radius: 4px;
	background: #efefea;
	color: #444;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hpv-pill--in_progress,
.hpv-pill--sent,
.hpv-pill--active {
	background: #e5f0ff;
	color: #1f4fbf;
}

.hpv-pill--review,
.hpv-pill--client {
	background: #fff3cf;
	color: #7a5500;
}

.hpv-pill--completed,
.hpv-pill--paid,
.hpv-pill--signed,
.hpv-pill--done {
	background: #ecffd0;
	color: var(--p-accent-ink);
}

.hpv-pill--overdue {
	background: #ffe5e3;
	color: #b3261e;
}

.hpv-pill--void,
.hpv-pill--cancelled,
.hpv-pill--on_hold,
.hpv-pill--paused {
	background: #efefea;
	color: #777;
}

/* ── Projekt tábla ──────────────────────────────── */

.hpv-project-meta {
	display: grid;
	grid-template-columns: repeat(3, auto) 1fr;
	gap: 24px;
	align-items: center;
}

.hpv-project-meta > div {
	display: grid;
	gap: 4px;
}

.hpv-project-meta span:first-child {
	color: var(--p-muted);
	font-size: 12px;
}

.hpv-project-meta__progress {
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 10px;
}

.hpv-project-meta__progress > span:first-child {
	grid-column: 1 / -1;
}

.hpv-project-meta__progress > .hpv-bar {
	grid-column: 1 / 3;
	min-width: 120px;
}

.hpv-board {
	display: grid;
	grid-template-columns: repeat(4, minmax(220px, 1fr));
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.hpv-board__col {
	display: grid;
	align-content: start;
	gap: 8px;
	min-height: 180px;
	padding: 14px;
	border-radius: 6px;
	background: #ecebe6;
}

.hpv-board__col h2 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
	font-size: 13px;
	letter-spacing: 0;
}

.hpv-board__col h2 span {
	color: var(--p-muted);
}

.hpv-board__col--client {
	background: #fff3cf;
}

.hpv-board__col--done {
	background: #eef8df;
}

.hpv-task {
	display: grid;
	gap: 4px;
	padding: 12px;
	border-radius: 6px;
	background: var(--p-card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.hpv-task small {
	color: var(--p-muted);
}

.hpv-board__empty {
	margin: 0;
	color: var(--p-muted);
}

/* ── Listák, dokumentumok ───────────────────────── */

.hpv-table-wrap {
	padding: 6px 0;
	overflow-x: auto;
}

.hpv-list {
	width: 100%;
	border-collapse: collapse;
}

.hpv-list th,
.hpv-list td {
	padding: 12px 22px;
	border-bottom: 1px solid var(--p-line);
	text-align: left;
	white-space: nowrap;
}

.hpv-list th {
	color: var(--p-muted);
	font-size: 12px;
	font-weight: 600;
}

.hpv-list tr:last-child td {
	border-bottom: 0;
}

.hpv-num {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}

.hpv-doc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.hpv-doc-actions > span {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hpv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid var(--p-ink);
	border-radius: 4px;
	background: var(--p-ink);
	color: #fff !important;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.hpv-btn:hover {
	background: #262626;
}

.hpv-btn--ghost {
	background: var(--p-card);
	color: var(--p-ink) !important;
	border-color: var(--p-line);
}

.hpv-btn--ghost:hover {
	background: var(--p-soft);
}

.hpv-paper {
	padding: clamp(24px, 5vw, 56px);
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.hpv-invoice__head {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--p-line);
	font-size: 13px;
}

.hpv-invoice__brand {
	margin-bottom: 6px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.hpv-invoice__title {
	display: grid;
	gap: 6px;
	justify-items: end;
	text-align: right;
}

.hpv-invoice__title h1 {
	font-size: 30px;
}

.hpv-invoice__meta {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 20px;
	padding: 24px 0;
	font-size: 14px;
}

.hpv-invoice__meta > div {
	display: grid;
	align-content: start;
	gap: 4px;
}

.hpv-invoice__meta span {
	color: var(--p-muted);
	font-size: 12px;
}

.hpv-invoice__items {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.hpv-invoice__items th,
.hpv-invoice__items td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--p-line);
	text-align: left;
}

.hpv-invoice__items th {
	color: var(--p-muted);
	font-size: 12px;
	font-weight: 600;
}

.hpv-invoice__items tfoot td {
	border-bottom: 0;
	padding-top: 10px;
	padding-bottom: 4px;
	text-align: right;
}

.hpv-invoice__total td {
	padding-top: 14px !important;
	font-size: 20px;
	font-weight: 700;
}

.hpv-invoice__notes {
	margin-top: 28px;
	color: var(--p-muted);
	font-size: 14px;
}

.hpv-contract h1 {
	margin-bottom: 24px;
	font-size: 28px;
}

.hpv-contract__body {
	font-size: 15px;
	line-height: 1.7;
}

.hpv-contract__body h2,
.hpv-contract__body h3 {
	margin: 24px 0 8px;
}

.hpv-signature {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px dashed #c9c9c1;
}

.hpv-signature__name {
	font-family: "Brush Script MT", "Segoe Script", cursive;
	font-size: 34px;
	line-height: 1.2;
}

.hpv-signature__meta {
	margin-top: 8px;
	color: var(--p-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.hpv-sign {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.hpv-field {
	display: grid;
	gap: 6px;
	color: var(--p-muted);
	font-size: 13px;
}

.hpv-field input,
.hpv-field select,
.hpv-login input[type=text],
.hpv-login input[type=password] {
	width: 100%;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-card);
	color: var(--p-ink);
	font: inherit;
	font-size: 16px;
}

.hpv-field input:focus,
.hpv-login input:focus {
	border-color: #999;
	outline: 3px solid rgba(184, 255, 52, .5);
}

/* Fájlok */
.hpv-upload {
	display: grid;
	gap: 12px;
}

.hpv-upload h2 {
	margin: 0;
}

.hpv-upload__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

.hpv-upload .hpv-muted {
	margin: 0;
}

.hpv-upload .hpv-btn {
	justify-self: start;
}

.hpv-field input[type=file] {
	padding: 10px 12px;
	font-size: 14px;
}

.hpv-files td small {
	font-size: 12px;
}

.hpv-files__actions {
	white-space: nowrap;
}

.hpv-files__actions form {
	display: inline;
	margin-left: 12px;
}

.hpv-link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--p-muted);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 720px) {
	.hpv-upload__row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Telefonon: fájlnév, méret, műveletek; a feladó és a dátum elfér a név alatt is. */
	.hpv-files th:nth-child(2),
	.hpv-files td:nth-child(2),
	.hpv-files th:nth-child(3),
	.hpv-files td:nth-child(3) {
		display: none;
	}

	.hpv-files td:first-child {
		word-break: break-word;
	}

	.hpv-files__actions {
		white-space: normal;
		text-align: right;
	}

	.hpv-files__actions form {
		display: block;
		margin: 6px 0 0;
	}
}

.hpv-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
}

.hpv-check input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--p-ink);
}

.hpv-sign .hpv-btn {
	justify-self: start;
}

.hpv-alert {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #efefea;
}

.hpv-alert--ok {
	background: #ecffd0;
	color: #2d5c00;
}

.hpv-alert--error {
	background: #ffe5e3;
	color: #8c1d18;
}

.hpv-dl {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 10px 16px;
	margin: 0 0 16px;
}

.hpv-dl dt {
	color: var(--p-muted);
}

.hpv-dl dd {
	margin: 0;
}

.hpv-panel h3 {
	margin: 20px 0 10px;
	font-size: 15px;
}

.hpv-people {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hpv-people li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hpv-people small {
	color: var(--p-muted);
}

/* ── Bejelentkezés ──────────────────────────────── */

.hpv-login {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px 16px;
	background: radial-gradient(circle at 20% 10%, rgba(184, 255, 52, .10), transparent 40%), var(--p-bg, #e9e8e3);
}

.hpv-login__card {
	width: min(420px, 100%);
	padding: 36px 32px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-card);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .06);
}

.hpv-login h1 {
	margin: 0 0 6px;
	font-size: 26px;
	letter-spacing: -.02em;
	text-align: center;
}

.hpv-login__card > .hpv-muted {
	margin: 0 0 22px;
	text-align: center;
}

.hpv-login form p {
	display: grid;
	gap: 6px;
	margin: 0 0 14px;
	color: var(--p-muted);
	font-size: 13px;
}

.hpv-login .login-remember label {
	display: flex;
	gap: 8px;
	align-items: center;
}

.hpv-login input[type=submit] {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 4px;
	background: var(--p-ink);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.hpv-login input[type=submit]:hover {
	background: #262626;
}

.hpv-login__links,
.hpv-login__help,
.hpv-login__lang {
	margin: 8px 0 0;
	color: var(--p-muted);
	font-size: 13px;
	text-align: center;
}

.hpv-login__lang {
	margin-top: 16px;
}

.hpv-login__lang a {
	color: var(--p-muted);
}

.hpv-login__lang a[aria-current] {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.hpv-client-picker {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hpv-client-picker a {
	display: block;
	padding: 10px 14px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	text-decoration: none;
}

/* ── Mobil ──────────────────────────────────────── */

/* Meetings (videóhívás) */
.hpv-pill--live {
	background: #ffe5e3;
	color: #b3261e;
}

.hpv-meeting--live {
	border-color: #f3c7c3;
	background: #fff8f7;
}

.hpv-btn--small {
	justify-self: start;
	min-height: 32px;
	padding: 0 14px;
	font-size: 13px;
}

.hpv-todo li > strong,
.hpv-todo li > span {
	display: block;
}

.hpv-todo li:not(:has(a)) {
	display: grid;
	gap: 2px;
	padding: 12px 14px 12px 16px;
	border-left: 3px solid var(--p-accent);
	border-radius: 4px 12px 12px 4px;
	background: var(--p-bg);
}

.hpv-panel h3 {
	margin: 18px 0 6px;
	font-size: 15px;
}

.hpv-join {
	max-width: 640px;
}

.hpv-join p {
	margin: 0 0 14px;
}

.hpv-join .hpv-check {
	margin-bottom: 16px;
}

.hpv-call {
	display: grid;
	place-items: center;
	height: min(72vh, 760px);
	overflow: hidden;
	border-radius: 6px;
	background: #0d0d0d;
	color: #fff;
}

.hpv-call iframe {
	width: 100%;
	height: 100%;
}

.hpv-call__note {
	margin-top: 10px;
	font-size: 13px;
}

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

	.hpv-project-meta {
		grid-template-columns: repeat(3, auto);
	}

	.hpv-project-meta__progress {
		grid-column: 1 / -1;
	}

	.hpv-invoice__head {
		flex-direction: column;
	}

	.hpv-invoice__title {
		justify-items: start;
		text-align: left;
	}

	.hpv-invoice__meta {
		grid-template-columns: 1fr 1fr;
	}

	.hpv-invoice__meta > div:first-child {
		grid-column: 1 / -1;
	}

	.hpv-dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.hpv-dl dd {
		margin-bottom: 10px;
	}
}

/* ── Nyomtatás / PDF: csak a dokumentum ─────────── */

@media print {
	.hpv-top,
	.hpv-hubhead,
	.hpv-doc-actions,
	.hpv-sign,
	.hpv-alert,
	.hpv-preview-bar {
		display: none !important;
	}

	.hpv-portal,
	.hpv-portal-body {
		display: block;
		background: var(--p-card);
	}

	.hpv-main {
		max-width: none;
		padding: 0;
	}

	.hpv-paper {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}

/* Havidíjas projekt: hónapválasztó */
.hpv-periods {
	display: flex;
	gap: 6px;
	margin: -8px 0 18px;
	overflow-x: auto;
}

.hpv-periods a {
	padding: 6px 12px;
	border: 1px solid var(--p-line);
	border-radius: 4px;
	background: var(--p-card);
	color: var(--p-muted);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.hpv-periods a.is-active {
	border-color: var(--p-ink);
	background: var(--p-ink);
	color: #fff;
}

/* Jóváhagyások */
.hpv-card-link--attention {
	border-color: #e9d25b;
	box-shadow: inset 4px 0 0 #e9d25b;
}

.hpv-approval__img {
	margin: 0 0 16px;
}

.hpv-approval__img img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Kész szöveg az SEO OS-ből (#95): amit hozzáírtunk / átfogalmaztunk zölddel, a kivett mondat pirosan áthúzva
   (ugyanaz a jelölés, mint a DOCX „Eltérésekkel” exportban). */
.hpv-approval mark {
	padding: 0 2px;
	border-radius: 3px;
	background: #d6f0dc;
	color: inherit;
	box-shadow: inset 0 -2px 0 #6fbf86;
}

.hpv-approval del {
	color: #a33a2e;
	text-decoration-thickness: 1.5px;
}

.hpv-approval .hpv-contract__body table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 14px;
}

.hpv-approval .hpv-contract__body th,
.hpv-approval .hpv-contract__body td {
	padding: 8px 10px;
	border: 1px solid #e4e3dc;
	text-align: left;
	vertical-align: top;
}

.hpv-approval .hpv-contract__body th {
	width: 32%;
	font-weight: 600;
}

.hpv-decide {
	display: grid;
	gap: 12px;
}

.hpv-decide h2 {
	margin: 0;
}

.hpv-field textarea,
.hpv-comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	font: inherit;
	font-size: 16px;
}

.hpv-decide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hpv-thread {
	display: grid;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.hpv-thread li {
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--p-bg);
}

.hpv-thread li p {
	margin: 4px 0 0;
}

.hpv-thread__approved {
	box-shadow: inset 3px 0 0 #7bc043;
}

.hpv-thread__changes {
	box-shadow: inset 3px 0 0 #d93025;
}

.hpv-thread span {
	margin-left: 8px;
	font-size: 12px;
}

.hpv-comment-form {
	display: grid;
	gap: 8px;
}

.hpv-comment-form .hpv-btn {
	justify-self: start;
}

/* Csatolmány a kérésnél (#70): a fájlválasztó és a Küldés egy sorban, kép a szálban kicsiben */
.hpv-comment-form__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hpv-file-pick { position: relative; display: inline-flex; align-items: center; cursor: pointer; font-size: 14px; color: var(--p-muted, #666); }
.hpv-file-pick input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.hpv-file-pick:has(input:valid:not([value=""])) span { color: var(--p-ink); }
.hpv-thread__img { display: block; margin-top: 8px; max-width: 320px; }
.hpv-thread__img img { display: block; max-width: 100%; max-height: 240px; border-radius: 4px; border: 1px solid var(--p-line); }
.hpv-thread .hpv-file-chip { margin-top: 8px; }
.hpv-field--file input[type="file"] { padding: 8px 0; }

/* Havi riport */
.hpv-report h2 {
	margin: 32px 0 12px;
	font-size: 18px;
}

.hpv-report__head h1 {
	margin: 8px 0 4px;
}

.hpv-report__highlights {
	display: grid;
	gap: 8px;
	margin: 20px 0;
	padding: 16px 20px 16px 36px;
	border-radius: 6px;
	background: #f4ffe0;
}

.hpv-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}

.hpv-metric {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	break-inside: avoid;
}

.hpv-metric > span {
	color: var(--p-muted);
	font-size: 13px;
}

.hpv-metric strong {
	font-size: 24px;
	letter-spacing: -.02em;
}

.hpv-delta {
	color: var(--p-muted);
	font-size: 12px;
}

.hpv-delta.is-good {
	color: #2e7d1f;
}

.hpv-delta.is-bad {
	color: #b3261e;
}

.hpv-metric__why {
	margin-top: 4px;
	color: var(--p-ink);
	font-size: 12px;
	line-height: 1.45;
}

.hpv-report__block {
	margin: 28px 0;
	padding: 4px 20px 16px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	break-inside: avoid;
}

.hpv-report__block h3 {
	margin: 18px 0 6px;
	font-size: 15px;
}

.hpv-report__steps {
	display: grid;
	gap: 8px;
	padding-left: 20px;
}

.hpv-report__steps li.is-current {
	padding: 6px 10px;
	border-radius: 4px;
	background: #f4ffe0;
}

.hpv-report__here {
	color: #2e7d1f;
	font-size: 12px;
	font-weight: 600;
}

.hpv-report__list-title {
	margin: 12px 0 4px;
}

.hpv-report__note {
	margin-top: 14px;
	font-size: 12px;
}

.hpv-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 32px;
	margin-top: 6px;
}

.hpv-bars span {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background: #e3e3dc;
}

.hpv-bars span.is-last {
	background: #0d0d0d;
}

.hpv-report__list {
	display: grid;
	gap: 6px;
	padding-left: 20px;
}

.hpv-report__foot {
	margin-top: 32px;
	font-size: 13px;
}

/* Ügyfélkérések */
.hpv-new-request > summary {
	display: inline-flex;
	list-style: none;
	cursor: pointer;
}

.hpv-new-request > summary::-webkit-details-marker {
	display: none;
}

.hpv-new-request[open] > summary {
	margin-bottom: 4px;
}

.hpv-new-request .hpv-field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	font: inherit;
	font-size: 16px;
}

.hpv-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.hpv-new-request .hpv-form > .hpv-btn {
	justify-self: start;
}

.hpv-new-request .hpv-form {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

/* Hozzáférések (access.php) */
.hpv-access form { margin: 8px 0; }
.hpv-access details { margin-top: 12px; }
.hpv-access details summary { cursor: pointer; color: var(--hpv-muted, #6b6b66); }
.hpv-access__form { display: grid; gap: 10px; max-width: 520px; margin-top: 8px; }
.hpv-access__steps { margin: 8px 0 12px; padding-left: 1.4em; max-width: 64ch; }
.hpv-access__steps li { margin: 4px 0; line-height: 1.5; }
.hpv-list-plain { list-style: none; margin: 0; padding: 0; }
.hpv-list-plain li { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06); }

/* Belépés e-mailes linkkel */
.hpv-magic { margin: 14px 0 6px; text-align: left; }
.hpv-magic details { border-top: 1px solid rgba(0,0,0,.08); padding-top: 12px; }
.hpv-magic summary { cursor: pointer; font-weight: 600; text-align: center; }
.hpv-magic__form { display: grid; gap: 10px; margin-top: 12px; }
.hpv-magic__form label { display: grid; gap: 4px; font-size: 14px; }
.hpv-magic__form input { padding: 11px 12px; border: 1px solid #d8d8d0; border-radius: 4px; font: inherit; }
.hpv-magic .hpv-alert { margin-bottom: 10px; }

/* Magyar számla: hogyan fizethet az ügyfél (kártya / átutalás) */
.hpv-howpay { margin-bottom: 20px; }
.hpv-howpay__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.hpv-howpay__grid h3 { margin: 0 0 6px; font-size: 15px; }
.hpv-howpay__grid p { margin: 0 0 12px; }
.hpv-howpay__kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; }
.hpv-howpay__kv dt { color: var(--p-muted); }
.hpv-howpay__kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media print { .hpv-howpay { display: none; } }
.hpv-howpay__secure { margin-top: 10px; font-size: 13px; }
.hpv-howpay__terms { margin: 14px 0 0; font-size: 13px; }
.hpv-howpay__terms a { color: inherit; }
.hpv-teya-preview { border-style: dashed; }
.hpv-teya-preview .hpv-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Onboarding: egyedi kérdéssor részei és tippjei */
.hpv-onboarding__section {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--p-line);
	font-size: 18px;
}

.hpv-onboarding__section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.hpv-onboarding__hint {
	margin-top: -2px;
	color: var(--p-muted);
	font-size: 12.5px;
	line-height: 1.45;
}

/* Jóváhagyás: weboldal-előnézet a portálon belül (includes/preview.php) */
.hpv-preview {
	margin: 0 0 18px;
}

.hpv-preview__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.hpv-preview__devices {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--p-line);
	border-radius: 4px;
	background: var(--p-card);
}

.hpv-preview__devices button {
	min-height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--p-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.hpv-preview__devices button[aria-pressed=true] {
	background: var(--p-ink);
	color: #fff;
}

.hpv-preview__open {
	color: var(--p-ink);
	font-size: 13px;
}

.hpv-preview__stage {
	position: relative;
	overflow: hidden;
	height: 78vh;
	min-height: 520px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: #eef1f3;
}

/* A keret valódi szélességben renderel, és a szkript kicsinyíti (scale) – a méreteket a szkript állítja. */
.hpv-preview__stage iframe {
	display: block;
	width: 1440px;
	height: 100%;
	border: 0;
	background: var(--p-card);
	transform-origin: 0 0;
}

.hpv-preview.is-device .hpv-preview__stage {
	padding-top: 18px;
}

.hpv-preview.is-device .hpv-preview__stage iframe {
	border-radius: 6px;
	box-shadow: 0 0 0 8px #1d2226, 0 18px 40px rgba(0, 0, 0, .18);
}

.hpv-preview__note {
	margin: 8px 0 0;
	font-size: 13px;
}

@media (max-width: 700px) {
	.hpv-preview__devices button {
		padding: 0 10px;
	}
}

/* Megbeszélések: közelgő (naptár) és korábbi hívások */
.hpv-section-title { margin: 22px 0 10px; font-size: 17px; }
.hpv-section-title:first-of-type { margin-top: 0; }

/* ─── Véleményezés (Áron, 2026-09-30): ami véleményre vár, legyen szem előtt ─── */
.hpv-review-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 6px;
	background: var(--p-accent);
	color: var(--p-ink);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(120, 180, 0, .25);
}
.hpv-review-banner__icon { font-size: 26px; line-height: 1; }
.hpv-review-banner__text { display: grid; gap: 2px; flex: 1 1 260px; }
.hpv-review-banner__text strong { font-size: 16px; }
.hpv-review-banner__text span { font-size: 14px; }
.hpv-review-banner .hpv-btn { min-height: 40px; }

.hpv-review-hero {
	margin: 0 0 24px;
	padding: 20px;
	border: 2px solid var(--p-ink);
	border-radius: 6px;
	background: var(--p-card);
}
.hpv-review-hero h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 20px; }
.hpv-review-hero__list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.hpv-review-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--p-line);
	border-radius: 6px;
	background: var(--p-bg);
	color: var(--p-ink);
	text-decoration: none;
}
.hpv-review-card:hover { border-color: var(--p-ink); }
.hpv-review-card__thumb { display: grid; place-items: center; width: 96px; height: 72px; overflow: hidden; border-radius: 4px; background: var(--p-card); font-size: 30px; }
.hpv-review-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hpv-review-card__body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.hpv-review-card__body small { color: var(--p-muted); }
.hpv-review-card__body strong { font-size: 16px; overflow-wrap: anywhere; }
.hpv-review-card .hpv-btn { min-height: 36px; padding: 0 16px; font-size: 14px; }

.hpv-review-guide {
	margin: 0 0 20px;
	padding: 18px 20px;
	border-radius: 6px;
	background: #fffbe6;
	border: 1px solid #f1dc8a;
}
.hpv-review-guide h2 { margin: 0 0 8px; font-size: 18px; }
.hpv-review-guide ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }

.hpv-approval__link { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hpv-file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--p-line); border-radius: 4px; background: var(--p-card); color: var(--p-ink); text-decoration: none; font-size: 14px; max-width: 100%; overflow-wrap: anywhere; }

.hpv-feedback { border: 2px solid var(--p-ink); scroll-margin-top: 20px; }
.hpv-feedback__form { display: grid; gap: 12px; }
.hpv-feedback__form input[name=place] { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--p-line); border-radius: 6px; font: inherit; font-size: 16px; }
.hpv-feedback__drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 2px dashed var(--p-line); border-radius: 6px; }
.hpv-feedback__drop.is-over { border-color: var(--p-accent-ink); background: #f4ffe0; }
.hpv-btn--ok { background: var(--p-accent-ink); border-color: var(--p-accent-ink); }
.hpv-btn--ok:hover { background: #336800; }
.hpv-btn--warn { background: #b3261e; border-color: #b3261e; }
.hpv-btn--warn:hover { background: #8f1e18; }

.hpv-thread__where { display: block; margin: 4px 0 0 !important; font-size: 13px !important; color: var(--p-muted); }
.hpv-thread__attach { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.hpv-thread__img img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--p-line); }
.hpv-thread span.hpv-thread__where { margin-left: 0 !important; }

/* ─── Kezdőlap (2026-10-02): Teendőid kártyák, a projekt állása, oldalt megbeszélés, kérdés, csapat ─── */

.hpv-btn {
	transition: background-color .15s var(--p-ease), border-color .15s var(--p-ease), transform .1s var(--p-ease);
}

.hpv-btn:active {
	transform: translateY(1px);
}

/* Lime csak a fő gombon (fizetés). */
.hpv-btn--lime {
	border-color: var(--p-accent);
	background: var(--p-accent);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
	color: var(--p-ink) !important;
}

.hpv-btn--lime:hover {
	background: #a8f01c;
}

.hpv-head--home {
	margin-bottom: 22px;
}

.hpv-head--home h1 {
	font-size: clamp(28px, 3.4vw, 36px);
	letter-spacing: -.03em;
}

.hpv-head--home p {
	margin: 0;
	font-size: 15.5px;
}

.hpv-home {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 20px;
	align-items: start;
}

.hpv-home__main,
.hpv-home__side {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.hpv-home__main > .hpv-panel,
.hpv-home__side > .hpv-panel {
	margin: 0;
}

.hpv-home + .hpv-updates {
	margin-top: 20px;
}

.hpv-panel__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.hpv-panel__head h2 {
	margin: 0 !important;
}

.hpv-panel__head .hpv-muted {
	margin-left: auto;
	font-size: 13px;
}

.hpv-todos {
	padding-bottom: 8px;
}

.hpv-todos__list {
	display: grid;
	margin: 0 -22px;
	padding: 0;
	list-style: none;
}

.hpv-todo-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-top: 1px solid var(--p-line-2);
	transition: background-color .15s var(--p-ease);
}

.hpv-todo-card:first-child {
	border-top: 0;
}

.hpv-todo-card:hover {
	background: #fbfbf8;
}

.hpv-todo-card.is-alert .hpv-todo-card__text small {
	color: var(--p-alert);
	font-weight: 600;
}

.hpv-todo-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: var(--p-soft);
	color: var(--p-ink-2);
}

.hpv-todo-card__icon svg {
	width: 21px;
	height: 21px;
}

.hpv-tone--amber { background: #fff3d6; color: #8a5a00; }
.hpv-tone--blue { background: #e9f1ff; color: #1f4fbf; }
.hpv-tone--green { background: var(--p-accent-soft); color: var(--p-accent-ink); }
.hpv-tone--red { background: #ffe7e1; color: #b3261e; }

.hpv-todo-card__thumb {
	flex: none;
	width: 96px;
	height: 66px;
	overflow: hidden;
	border: 1px solid var(--p-line);
	border-radius: 4px;
	background: var(--p-soft);
}

.hpv-todo-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hpv-todo-card__text {
	display: grid;
	flex: 1;
	gap: 3px;
	min-width: 0;
}

.hpv-todo-card__text strong {
	font-size: 15.5px;
	font-weight: 650;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.hpv-todo-card__text small {
	color: var(--p-muted);
	font-size: 13.5px;
}

.hpv-todo-card__go {
	flex: none;
	min-height: 42px;
	padding: 0 18px;
	font-size: 14px;
	white-space: nowrap;
}

/* Az egész kártya kattintható (a gomb a link). */
.hpv-todo-card__go::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hpv-todos__empty {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0 10px;
}

.hpv-todos__empty p {
	display: grid;
	gap: 2px;
	margin: 0;
	font-size: 14.5px;
}

/* A projekt állása */
.hpv-proj__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 18px;
}

.hpv-proj__head h2 {
	margin: 0 !important;
}

.hpv-proj__head h2 a {
	text-decoration: none;
}

.hpv-proj__head h2 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hpv-proj__pct {
	margin-left: auto;
	color: var(--p-muted);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.hpv-steps {
	display: flex;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.hpv-steps li {
	position: relative;
	display: grid;
	flex: 1;
	align-content: start;
	gap: 6px;
	min-width: 0;
	padding-right: 8px;
}

.hpv-steps li::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 24px;
	right: 0;
	height: 2px;
	background: #e3e3dc;
}

.hpv-steps li:last-child::after {
	display: none;
}

.hpv-steps li.is-done::after {
	background: var(--p-ink);
}

.hpv-steps__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 2px solid #d0d0c8;
	border-radius: 50%;
	background: var(--p-card);
}

.hpv-steps__dot svg {
	width: 13px;
	height: 13px;
	color: var(--p-accent);
	stroke-width: 3;
}

.hpv-steps li.is-done .hpv-steps__dot {
	border-color: var(--p-ink);
	background: var(--p-ink);
}

.hpv-steps li.is-now .hpv-steps__dot {
	border-color: var(--p-ink);
	box-shadow: 0 0 0 5px var(--p-accent-soft);
}

.hpv-steps strong {
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1.25;
}

.hpv-steps li:not(.is-done):not(.is-now) strong {
	color: var(--p-muted);
	font-weight: 500;
}

.hpv-steps small {
	color: var(--p-accent-ink);
	font-size: 12px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.hpv-proj .hpv-bar {
	margin-bottom: 16px;
}

.hpv-proj__next {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 6px;
	background: var(--p-bg);
	font-size: 14px;
	line-height: 1.5;
}

.hpv-proj__more {
	color: var(--p-ink-2) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.hpv-proj__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Oldalsó kártyák */
.hpv-side-card {
	display: grid;
	gap: 8px;
	padding: 18px 20px;
}

.hpv-side-card h2 {
	margin: 0 0 2px !important;
	font-size: 15px !important;
}

.hpv-side-card > .hpv-muted {
	font-size: 14px;
}

.hpv-side-card__title {
	font-size: 15.5px;
}

.hpv-side-card .hpv-btn--small {
	min-height: 40px;
	margin-top: 4px;
	padding: 0 16px;
	font-size: 13.5px;
}

.hpv-side-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}

.hpv-side-card__link {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	text-underline-offset: 3px;
}

.hpv-team {
	display: grid;
	gap: 10px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.hpv-team li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.3;
}

.hpv-team small {
	display: block;
	color: var(--p-muted);
	font-size: 12.5px;
}

@media (max-width: 1100px) {
	.hpv-home {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.hpv-hub {
		padding: 0 10px;
	}

	.hpv-me__who {
		max-width: 160px;
	}
}

/* ─── Telefon és keskeny tablet (≤ 900 px): alsó sáv 4 füllel, a fülek görgethető szegmensek ─── */

@media (max-width: 900px) {
	.hpv-portal {
		--p-bar: calc(64px + env(safe-area-inset-bottom, 0px));
		padding-bottom: var(--p-bar);
	}

	.hpv-top__in {
		gap: 12px;
		height: 60px;
	}

	.hpv-brand__name--agency {
		display: none;
	}

	.hpv-brand__name--client {
		display: grid;
	}

	.hpv-brand__name {
		font-size: 15px;
	}

	.hpv-brand__name,
	.hpv-brand__name small {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hpv-brand {
		flex: 1;
	}

	/* Alsó sáv */
	.hpv-hubs {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		gap: 0;
		padding: 6px max(6px, env(safe-area-inset-right, 0px), calc((100vw - 620px) / 2)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px), calc((100vw - 620px) / 2));
		border-top: 1px solid var(--p-line);
		/* Tömör háttér: az elmosás görgetéskor minden képkockán újraszámol, telefonon akadt. */
		background: var(--p-card);
	}

	.hpv-hub {
		flex: 1 1 0;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		min-height: 52px;
		padding: 2px 0;
		border-bottom: 0;
		font-size: 11.5px;
		font-weight: 650;
		line-height: 1.1;
	}

	.hpv-hub__icon {
		display: grid;
		place-items: center;
		width: 56px;
		height: 30px;
		border-radius: 6px;
		transition: background-color .2s var(--p-ease), color .2s var(--p-ease);
	}

	.hpv-hub.is-active .hpv-hub__icon {
		background: var(--p-ink);
		color: var(--p-accent);
	}

	.hpv-hub__label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hpv-hub__count {
		position: absolute;
		top: 0;
		left: calc(50% + 10px);
		min-width: 17px;
		height: 17px;
		font-size: 10.5px;
		box-shadow: 0 0 0 2px #fff;
	}

	/* Fejléc: csak az avatar (rákattintva Fiók, nyelv, kijelentkezés) */
	.hpv-me summary {
		gap: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.hpv-me summary .hpv-avatar {
		width: 40px;
		height: 40px;
		font-size: 13px;
	}

	.hpv-me[open] summary .hpv-avatar,
	.hpv-me.is-active summary .hpv-avatar {
		box-shadow: 0 0 0 2px var(--p-card), 0 0 0 4px var(--p-ink);
	}

	.hpv-me__who,
	.hpv-me__chev {
		display: none;
	}

	.hpv-me__menu {
		position: fixed;
		top: 64px;
		right: 12px;
		width: min(300px, calc(100vw - 24px));
	}

	.hpv-me__head {
		display: block;
	}

	.hpv-main {
		padding-top: 20px;
		padding-bottom: 32px;
	}

	/* Fülek: vízszintesen görgethető szegmensek */
	.hpv-hubhead h1 {
		margin-bottom: 12px;
		font-size: 26px;
	}

	.hpv-tabs {
		gap: 2px;
		margin: 0 -16px;
		padding: 0 16px;
		overflow-x: auto;
		border-bottom: 0;
		scroll-padding: 0 16px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hpv-tabs::-webkit-scrollbar {
		display: none;
	}

	.hpv-tab {
		min-height: 40px;
		margin: 0;
		padding: 0 14px;
		border: 1px solid var(--p-line);
		border-radius: 4px;
		background: var(--p-card);
		font-size: 14px;
	}

	.hpv-tab.is-active {
		border-color: var(--p-ink);
		background: var(--p-ink);
		color: #fff !important;
	}

	.hpv-tab.is-active .hpv-tab__count {
		background: var(--p-accent);
		color: var(--p-ink);
	}

	/* Kezdőlap */
	.hpv-home {
		grid-template-columns: minmax(0, 1fr);
	}

	.hpv-head__client {
		display: none;
	}

	.hpv-home__side {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		align-items: start;
	}

	.hpv-chat.hpv-chat--portal {
		height: calc(100dvh - 60px - var(--p-bar) - 150px);
		min-height: 380px;
	}
}

@media (max-width: 560px) {
	.hpv-portal .hpv-panel {
		padding: 18px 16px;
	}

	.hpv-todos__list {
		margin: 0 -16px;
	}

	/* Projekt tábla telefonon: oszlopok egymás alatt (nem oldalra görgetve). */
	.hpv-board {
		grid-template-columns: minmax(0, 1fr);
		overflow: visible;
	}

	.hpv-board__col {
		min-height: 0;
	}

	/* Számla telefonon: kisebb margó és betű, hogy a tételsor elférjen. */
	.hpv-paper {
		padding: 22px 16px;
	}

	.hpv-invoice__items {
		font-size: 13px;
	}

	.hpv-invoice__items th,
	.hpv-invoice__items td {
		padding: 10px 4px;
	}

	.hpv-invoice__items .hpv-num {
		white-space: nowrap;
	}

	.hpv-todo-card {
		flex-wrap: wrap;
		gap: 12px 14px;
		padding: 16px;
	}

	.hpv-todo-card__icon {
		width: 40px;
		height: 40px;
	}

	.hpv-todo-card__text {
		flex-basis: calc(100% - 60px);
	}

	.hpv-todo-card.has-thumb .hpv-todo-card__text {
		flex-basis: calc(100% - 92px);
	}

	.hpv-todo-card__thumb {
		width: 78px;
		height: 56px;
	}

	.hpv-todo-card__go {
		width: 100%;
		min-height: 44px;
	}

	.hpv-proj__pct {
		margin-left: 0;
		width: 100%;
	}

	/* Lépések egymás alatt (vízszintesen nem fér ki a felirat). */
	.hpv-steps {
		flex-direction: column;
		gap: 0;
	}

	.hpv-steps li {
		grid-template-columns: 24px auto auto;
		justify-content: start;
		align-items: center;
		column-gap: 12px;
		padding: 0 0 14px;
	}

	.hpv-steps li:last-child {
		padding-bottom: 0;
	}

	.hpv-steps li::after {
		top: 24px;
		bottom: 0;
		left: 11px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.hpv-steps small {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hpv-portal *,
	.hpv-portal *::before,
	.hpv-portal *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

.hpv-review-banner + .hpv-hubhead {
	margin-top: 28px;
}