/* ==========================================================================
   TechShow X. VIP regisztráció — Prizma
   2. fázis: teljes űrlap-stílus

   🔴 GUARD-CSS — MIÉRT `!important` MINDENHOL?
   A Divi/Extra téma felülírja a natív elemeket (p, h1, h2, button, input,
   label, fieldset, legend, select, textarea, a, dl). Ezért MINDEN szabály:
     - a `.tse` scope alatt fut, és
     - `!important`-tal.

   Élesben mért driftek, amiket minden ÚJ komponensnél újra ellenőrizni kell:
     - input::placeholder{text-transform:uppercase;letter-spacing:1.2px}
       → a PSZEUDO-ELEMET is fedni kell, nem elég az inputot
     - <a class="tse-btn"> → a téma ALÁHÚZZA → linknek látszik, nem gombnak
     - a nyilatkozatok linkjeit külön kell színezni
     - a fieldset/legend a témában keretet és nagybetűs feliratot kap
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokenek + alap
   -------------------------------------------------------------------------- */
.tse {
	--ts-bg: #F4F5F8;
	--ts-surface: #FFFFFF;
	--ts-ink: #0A0B0E;
	--ts-ink-2: #5C616B;
	--ts-ink-3: #8A8F99;
	--ts-line: #E8EAF0;
	--ts-night: #0A0F1E;
	--ts-night-2: #121A30;
	--ts-accent: #5227FF;
	--ts-accent-hover: #3D14E0;
	--ts-accent-soft: #F1EDFF;
	--ts-fin-neon: #22C8E8;
	--ts-pay-neon: #FF5FAD;
	--ts-bank-neon: #FFC233;
	--ts-danger: #D6273A;
	--ts-danger-soft: #FDEDEF;
	--ts-radius: 12px;
	--ts-radius-s: 8px;
	--ts-radius-pill: 999px;
	--ts-font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ts-font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

	font-family: var(--ts-font-body) !important;
	color: var(--ts-ink) !important;
	text-align: left !important;

	/* Halvány alap az űrlap mögé. A blokkok fehér kártyák, ezért fehér
	   oldalháttéren nem lenne kontrasztjuk. Így a shortcode bármelyik
	   oldalon önmagában is jól néz ki. A hero saját, sötét hátteret kap
	   (lásd .tse-hero-wrap, ami ez után következik a fájlban). */
	background: var(--ts-bg) !important;
}

.tse *,
.tse *::before,
.tse *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Hero — éjkék, teljes szélességben
   -------------------------------------------------------------------------- */
.tse-hero-wrap {
	background: linear-gradient(160deg, var(--ts-night) 0%, var(--ts-night-2) 100%) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tse-hero {
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 56px 20px 48px !important;
	position: relative !important;
}

/* Prizma-hármas: vékony színcsík a hero alján */
.tse-hero-wrap::after {
	content: '' !important;
	display: block !important;
	height: 3px !important;
	background: linear-gradient(90deg,
		var(--ts-fin-neon) 0%, var(--ts-fin-neon) 33.3%,
		var(--ts-pay-neon) 33.3%, var(--ts-pay-neon) 66.6%,
		var(--ts-bank-neon) 66.6%, var(--ts-bank-neon) 100%) !important;
}

.tse-hero-kicker {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--ts-fin-neon) !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-weight: 500 !important;
}

.tse-hero-title {
	font-family: var(--ts-font-display) !important;
	font-size: 40px !important;
	line-height: 1.12 !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
}

.tse-hero-motto {
	font-family: var(--ts-font-body) !important;
	font-size: 18px !important;
	line-height: 1.55 !important;
	color: rgba(255, 255, 255, 0.82) !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	max-width: 56ch !important;
}

.tse-hero-deadline {
	display: inline-block !important;
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	color: #FFFFFF !important;
	background: rgba(255, 255, 255, 0.10) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: var(--ts-radius-pill) !important;
	padding: 7px 16px !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Törzs
   -------------------------------------------------------------------------- */
/* 🔴 A FÜGGŐLEGES TÉRKÖZ EGYETLEN HELYEN, ITT VAN.
   Az űrlap a TechShow-oldalon két idegen elem közé kerül: fölötte a logó-
   futószalag, alatta a Theme Builder lábléce. Egyik sem hoz magával térközt,
   ezért ha ez hiányzik, minden összecsúszik.
   Követelmény (Gábor, 2026-08-12): desktopon legalább 35px fent és lent,
   kisebb nézetekben arányosan. */
.tse-body {
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 56px 20px 64px !important;
}

.tse-intro {
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;
	line-height: 1.62 !important;
	color: var(--ts-ink-2) !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	max-width: 62ch !important;
}

/* --------------------------------------------------------------------------
   Blokkok
   -------------------------------------------------------------------------- */
.tse-block {
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius) !important;
	padding: 28px !important;
	margin: 0 0 20px !important;
}

.tse-block-head {
	margin: 0 0 22px !important;
	padding: 0 !important;
	border: 0 !important;
}

.tse-block-code {
	display: inline-block !important;
	font-family: var(--ts-font-display) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.06em !important;
	color: var(--ts-accent) !important;
	background: var(--ts-accent-soft) !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 6px 10px !important;
	margin: 0 0 12px !important;
}

.tse-block-title {
	font-family: var(--ts-font-display) !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	color: var(--ts-ink) !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tse-block-sub {
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--ts-ink-3) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Mezőrács
   -------------------------------------------------------------------------- */
.tse-fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 20px !important;
}

.tse-field {
	grid-column: 1 / -1 !important;
	min-width: 0 !important;
}

.tse-field--half {
	grid-column: span 1 !important;
}

/* --------------------------------------------------------------------------
   Címkék és beviteli mezők
   -------------------------------------------------------------------------- */
.tse-label {
	display: block !important;
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: var(--ts-ink) !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	float: none !important;
}

.tse-req {
	color: var(--ts-accent) !important;
	font-weight: 700 !important;
}

.tse-optnote {
	font-weight: 400 !important;
	color: var(--ts-ink-3) !important;
	font-size: 13px !important;
}

.tse-input {
	display: block !important;
	width: 100% !important;
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;   /* 16px alatt az iOS ráközelít a mezőre */
	line-height: 1.45 !important;
	font-weight: 400 !important;
	color: var(--ts-ink) !important;
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 11px 14px !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* A téma nagybetűsíti és ritkítja a helykitöltő szöveget — a pszeudo-elemet
   külön kell fedni, az inputra tett szabály erre NEM hat. */
.tse-input::placeholder {
	color: var(--ts-ink-3) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	opacity: 1 !important;
	font-size: 16px !important;
}

.tse-input:focus {
	outline: none !important;
	border-color: var(--ts-accent) !important;
	box-shadow: 0 0 0 3px var(--ts-accent-soft) !important;
}

.tse-input--locked {
	background: var(--ts-bg) !important;
	color: var(--ts-ink-2) !important;
	cursor: not-allowed !important;
}

.tse-input--locked:focus {
	border-color: var(--ts-line) !important;
	box-shadow: none !important;
}

select.tse-input {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235C616B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 38px !important;
}

textarea.tse-input {
	resize: vertical !important;
	min-height: 96px !important;
}

.tse-hint {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--ts-ink-3) !important;
	margin: 7px 0 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Rádiógombok
   A téma a fieldsetre keretet, a legendre nagybetűs feliratot tesz.
   -------------------------------------------------------------------------- */
.tse-radiogroup {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

.tse-radiogroup .tse-label {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

.tse-radio {
	display: flex !important;
	align-items: flex-start !important;
	gap: 11px !important;
	font-family: var(--ts-font-body) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	color: var(--ts-ink) !important;
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 13px 15px !important;
	margin: 0 0 9px !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: border-color .15s ease, background .15s ease !important;
}

.tse-radio:last-child {
	margin-bottom: 0 !important;
}

.tse-radio:hover {
	border-color: #C9CEDC !important;
}

.tse-radio input[type="radio"] {
	flex: 0 0 auto !important;
	width: 19px !important;
	height: 19px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	accent-color: var(--ts-accent) !important;
	cursor: pointer !important;
}

.tse-radio:has(input:checked) {
	border-color: var(--ts-accent) !important;
	background: var(--ts-accent-soft) !important;
}

.tse-radio-text {
	display: block !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Hozzájárulások
   -------------------------------------------------------------------------- */
.tse-consent {
	display: flex !important;
	align-items: flex-start !important;
	gap: 11px !important;
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: var(--ts-ink-2) !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	float: none !important;
}

.tse-consent input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: 19px !important;
	height: 19px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	accent-color: var(--ts-accent) !important;
	cursor: pointer !important;
}

.tse-consent-text {
	display: block !important;
	padding: 0 !important;
}

.tse-consent-link {
	margin: 7px 0 0 30px !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* A téma az aloldalakon saját linkszínt használ — a nyilatkozatoknál külön kell.
   🔴 A :not(.tse-btn) NEM elhagyható. Ez a szabály a FOLYÓSZÖVEGBEN lévő
   linkeknek szól, de `.tse-box-body a` (0,2,0) erősebb, mint `.tse-btn` (0,1,0),
   ezért aláhúzta a dobozban lévő LINK-ALAPÚ gombokat is — a „Mégis kitöltöm"
   linknek látszott, nem gombnak. Élesben mérve a lemondó megerősítő oldalon,
   2026-08-12. Ez pontosan a CLAUDE.md 6. szabályában leírt drift, csak nem a
   téma okozta, hanem a saját CSS-ünk. */
/* 🔴 A `.tse-consent-text a` NEM HAGYHATÓ EL.
   A nyilatkozat linkje 2026-08-13 óta a MONDATBA van ágyazva (korábban külön
   sorban állt, `.tse-consent-link` alatt). A régi szabály így nem illeszkedett
   rá: élesben mérve az "adatkezelési tájékoztatót" link se aláhúzást, se
   akcentus-színt nem kapott - csak egy árnyalattal sötétebb szürke lett, ami
   nem olvasható linknek. Egy jogszabály szerint kötelező dokumentum
   hivatkozásánál ez nem elég. */
.tse-consent-text a:not(.tse-btn),
.tse-consent-link a:not(.tse-btn),
.tse-box-body a:not(.tse-btn),
.tse-decline a:not(.tse-btn) {
	color: var(--ts-accent) !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
}

.tse-consent-text a:not(.tse-btn):hover,
.tse-consent-link a:not(.tse-btn):hover,
.tse-box-body a:not(.tse-btn):hover,
.tse-decline a:not(.tse-btn):hover {
	color: var(--ts-accent-hover) !important;
}

/* A két hozzájárulás közé nagyobb levegő, mint a rács alap gapje */
.tse-field--consent + .tse-field--consent {
	margin-top: 4px !important;
}

/* --------------------------------------------------------------------------
   Hibaüzenetek
   -------------------------------------------------------------------------- */
.tse-error {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	color: var(--ts-danger) !important;
	margin: 7px 0 0 !important;
	padding: 0 !important;
}

.tse-error[hidden] {
	display: none !important;
}

.tse-field--invalid .tse-input {
	border-color: var(--ts-danger) !important;
}

.tse-field--invalid .tse-input:focus {
	box-shadow: 0 0 0 3px var(--ts-danger-soft) !important;
}

.tse-formerror {
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	font-weight: 500 !important;
	color: var(--ts-danger) !important;
	background: var(--ts-danger-soft) !important;
	border: 1px solid #F5C2C8 !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 13px 16px !important;
	margin: 0 0 20px !important;
}

.tse-formerror[hidden] {
	display: none !important;
}

/* Semleges visszajelzés ugyanabban a sávban (nem hiba) */
.tse-formerror--info {
	color: var(--ts-ink) !important;
	background: var(--ts-accent-soft) !important;
	border-color: #D9CEFF !important;
}

/* --------------------------------------------------------------------------
   Gombok
   A téma az <a class="tse-btn"> elemet ALÁHÚZZA — ezért text-decoration:none.
   -------------------------------------------------------------------------- */
.tse-actions {
	margin: 28px 0 0 !important;
	padding: 0 !important;
}

.tse-actions--row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	align-items: center !important;
}

.tse-btn {
	display: inline-block !important;
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
	background: var(--ts-accent) !important;
	border: 1px solid var(--ts-accent) !important;
	border-radius: var(--ts-radius-pill) !important;
	padding: 15px 30px !important;
	margin: 0 !important;
	cursor: pointer !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: 0 2px 10px rgba(82, 39, 255, 0.22) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background .15s ease, border-color .15s ease !important;
}

.tse-btn:hover {
	background: var(--ts-accent-hover) !important;
	border-color: var(--ts-accent-hover) !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.tse-btn:disabled,
.tse-btn[aria-disabled="true"] {
	background: #B9BECC !important;
	border-color: #B9BECC !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

.tse-btn--ghost {
	color: var(--ts-accent) !important;
	background: transparent !important;
	border-color: var(--ts-accent) !important;
	box-shadow: none !important;
}

.tse-btn--ghost:hover {
	color: #FFFFFF !important;
	background: var(--ts-accent) !important;
}

.tse-btn--quiet {
	color: var(--ts-ink) !important;
	background: transparent !important;
	border-color: var(--ts-line) !important;
	box-shadow: none !important;
}

.tse-btn--quiet:hover {
	color: var(--ts-ink) !important;
	background: var(--ts-bg) !important;
	border-color: #C9CEDC !important;
}

.tse-note {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--ts-ink-3) !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	max-width: 56ch !important;
}

/* Beküldött adatlapon a lemondó linkre érkezőnek szóló magyarázat. Nem hiba,
   de ELTÉR a várakozásától (lemondani jött), ezért el kell különülnie a
   normál jegyzetektől - különben beleolvad a köszönő szövegbe.
   Minden szabály !important és .tse scope alatt: az Extra téma a `p`-t is
   felülírja (a projekt 6. szabálya). */
/* 🔴 A SZELEKTOR EREJE SZÁMÍT, NEM CSAK AZ !important (2026-08-16, élesben mérve).
   Első változatban `.tse-note--kiemelt` állt itt. A saját `.tse-box-body p`
   szabályunk (feljebb) EGGYEL erősebb (osztály + elem), ezért a padding, a
   font-size és a margin onnan jött - a böngészőben mérve `padding: 0px`. A
   háttér és a keret látszott, a térköz nem: a doboz szövege a keretre tapadt.
   A 6. szabály tehát nem elég úgy, hogy „mindenhova !important" - a
   specifikusságnak is el kell érnie a felülírandó szabályét. */
.tse-box-body p.tse-note--kiemelt {
	font-size: 15px !important;
	color: var(--ts-ink) !important;
	background: #F4F2FF !important;
	border-left: 3px solid var(--ts-accent) !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 12px 14px !important;
	margin: 0 0 18px !important;
	max-width: none !important;
}

/* 🔴 A GOMB ÉS AZ ALATTA LÉVŐ SZÖVEG ÖSSZEOLVADT.
   A 14px-es alaptérköz egy inline-block gomb alatt vizuálisan még kevesebbnek
   látszik, mert a gomb saját sormagassága is beleszámít. Élesben mérve
   (2026-08-13): a „Módosítom az adataimat" gomb és a „A határidőig bármikor
   visszatérhetsz erre a linkre." egy blokknak tűnt. */
.tse-actions + .tse-note {
	margin-top: 26px !important;
}

@media (max-width: 640px) {
	.tse-actions + .tse-note {
		margin-top: 20px !important;
	}
}

/* --------------------------------------------------------------------------
   "Nem tudok részt venni"
   -------------------------------------------------------------------------- */
.tse-decline {
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--ts-ink-3) !important;
	text-align: center !important;
	margin: 32px 0 0 !important;
	padding: 22px 0 0 !important;
	border-top: 1px solid var(--ts-line) !important;
}

/* --------------------------------------------------------------------------
   Üzenetdoboz + összegzés
   -------------------------------------------------------------------------- */
.tse-box {
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius) !important;
	padding: 32px !important;
	max-width: 760px !important;
	margin: 0 auto !important;
}

.tse-box-title {
	font-family: var(--ts-font-display) !important;
	font-size: 24px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	color: var(--ts-ink) !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tse-box-body p {
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;
	line-height: 1.62 !important;
	color: var(--ts-ink-2) !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.tse-box-body p:last-child {
	margin-bottom: 0 !important;
}

.tse-box-body strong {
	color: var(--ts-ink) !important;
	font-weight: 600 !important;
}

.tse-muted {
	color: var(--ts-ink-3) !important;
	font-size: 14px !important;
}

.tse-summary {
	display: grid !important;
	/* 🔴 A CÍMKE-OSZLOP NEM NŐHET KORLÁTLANUL (2026-08-14, Gábor jelezte).
	   Eddig `minmax(140px, auto)` volt: az `auto` a LEGHOSSZABB címkéhez
	   igazodik („I am uploading a new profile photo"), és a maradékot kapta az
	   ÉRTÉK - ezért tört négy sorba a „CEO for Central, South, and East
	   Europe". Gábor döntése: FELE-FELE. Mindkét oszlop ugyanannyit kap, a
	   címke és az érték is ugyanúgy tördelődik - nincs, ami a másik rovására
	   nőjön. */
	grid-template-columns: 1fr 1fr !important;
	gap: 10px 20px !important;
	margin: 22px 0 0 !important;
	padding: 20px 0 0 !important;
	border-top: 1px solid var(--ts-line) !important;
}

.tse-summary dt {
	font-family: var(--ts-font-body) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	color: var(--ts-ink-3) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tse-summary dd {
	font-family: var(--ts-font-body) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--ts-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.tse-hero {
		padding: 40px 16px 34px !important;
	}
	.tse-hero-title {
		font-size: 30px !important;
	}
	.tse-hero-motto {
		font-size: 16px !important;
	}
	/* Mobilon arányosan kisebb, de a 35px-es alsó határ fölött marad. */
	.tse-body {
		padding: 40px 16px 48px !important;
	}
	.tse-block,
	.tse-box {
		padding: 22px 18px !important;
	}
	.tse-fields {
		grid-template-columns: 1fr !important;
	}
	.tse-field--half {
		grid-column: 1 / -1 !important;
	}
	.tse-btn {
		display: block !important;
		width: 100% !important;
	}
	.tse-actions--row .tse-btn {
		width: 100% !important;
	}
	.tse-summary {
		grid-template-columns: 1fr !important;
		gap: 3px 0 !important;
	}
	.tse-summary dd {
		margin: 0 0 12px !important;
	}
}

/* --------------------------------------------------------------------------
   Piszkozat - visszatérő sáv és mentés-jelző
   -------------------------------------------------------------------------- */

/* A visszatérőnek szóló sáv. Nem hiba és nem siker - tájékoztatás, ezért
   a lila akcentus halvány változata, nem zöld/piros. */
.tse-resume {
	font-family: var(--ts-font-body) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--ts-ink) !important;
	background: var(--ts-accent-soft) !important;
	border: 1px solid #DCD2FF !important;
	border-radius: var(--ts-radius-s) !important;
	padding: 13px 16px !important;
	margin: 0 0 22px !important;
}

.tse-resume strong {
	font-weight: 700 !important;
	color: var(--ts-ink) !important;
}

.tse-save {
	font-family: var(--ts-font-body) !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	color: var(--ts-ink-3) !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}

.tse-save--kozben {
	color: var(--ts-ink-2) !important;
}

.tse-save--kesz {
	color: var(--ts-accent) !important;
}

/* A sikertelen piszkozat-mentés NEM piros: a beküldés ettől még működik, és a
   helyi másolat is megvan. A piros itt fölöslegesen megijesztené a kitöltőt. */
.tse-save--gond {
	color: var(--ts-ink-2) !important;
	font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Fotó-feltöltés

   A testvérprojekt élesben bevált stílusából, a `.tse` névtérre igazítva.
   A hibás állapotot itt a mező-keret `.tse-field--invalid` osztálya jelöli
   (ugyanaz, mint a többi mezőnél) - nem kell külön `is-error`.
   -------------------------------------------------------------------------- */

.tse-photo {
	margin: 0 !important;
}

/* 🔴 KRITIKUS: a guard-réteg `display:flex !important`-je FELÜLÍRNÁ a [hidden]
   attribútumot (a böngésző alap display:none-ja gyengébb szabály). Enélkül az
   üres állapotban is látszana az előnézet és a gombsor. */
.tse-photo [hidden] {
	display: none !important;
}

.tse-photo-drop {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	min-height: 132px !important;
	padding: 22px !important;
	text-align: center !important;
	cursor: pointer !important;
	background: var(--ts-surface) !important;
	border: 2px dashed var(--ts-line) !important;
	border-radius: var(--ts-radius) !important;
	transition: border-color .15s ease, background .15s ease !important;
}

.tse-photo-drop:hover,
.tse-photo-drop:focus-visible {
	border-color: var(--ts-accent) !important;
	background: #FBFAFF !important;
	outline: none !important;
}

.tse-photo-drop.is-over {
	border-color: var(--ts-accent) !important;
	background: #F4F1FF !important;
}

.tse-photo-drop.is-busy {
	cursor: progress !important;
}

.tse-field--invalid .tse-photo-drop {
	border-color: var(--ts-danger) !important;
	box-shadow: 0 0 0 3px var(--ts-danger-soft) !important;
}

.tse-photo-empty {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 5px !important;
}

.tse-photo-empty strong {
	font-family: var(--ts-font-body) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--ts-ink) !important;
}

.tse-photo-sub {
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--ts-ink-3) !important;
}

.tse-photo-prev {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
}

/* A kártyán négyzetesre vágva jelenik meg - az előnézet is így mutassa. */
.tse-photo-prev img {
	display: block !important;
	width: 120px !important;
	height: 120px !important;
	object-fit: cover !important;
	border-radius: var(--ts-radius-s) !important;
	border: 1px solid var(--ts-line) !important;
}

.tse-photo-meta {
	font-size: 13.5px !important;
	color: var(--ts-ink-3) !important;
	text-align: left !important;
}

.tse-photo-bar {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 4px !important;
	background: var(--ts-line) !important;
	border-radius: 0 0 var(--ts-radius) var(--ts-radius) !important;
	overflow: hidden !important;
}

.tse-photo-bar > span {
	display: block !important;
	height: 100% !important;
	width: 0 !important;
	background: var(--ts-accent) !important;
	transition: width .18s ease !important;
}

.tse-photo-actions {
	display: flex !important;
	gap: 10px !important;
	margin-top: 10px !important;
}

/* A téma a natív <button>-t átszínezi és nagybetűsíti - mindent lefedünk. */
.tse-photo-actions button {
	font-family: var(--ts-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--ts-ink-2) !important;
	background: var(--ts-surface) !important;
	border: 1px solid var(--ts-line) !important;
	border-radius: var(--ts-radius-pill) !important;
	padding: 8px 14px !important;
	cursor: pointer !important;
}

.tse-photo-actions button:hover {
	border-color: var(--ts-accent) !important;
	color: var(--ts-accent) !important;
}

.tse-photo-remove:hover {
	border-color: var(--ts-danger) !important;
	color: var(--ts-danger) !important;
}

@media (max-width: 640px) {
	.tse-photo-drop {
		min-height: 0 !important;
		padding: 18px !important;
	}
	.tse-photo-prev {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.tse-photo-meta {
		text-align: center !important;
	}
	/* Ujjbeggyel is elérhető méret */
	.tse-photo-actions button {
		flex: 1 1 0 !important;
		min-height: 44px !important;
	}
}

/* Csökkentett mozgás igénye esetén ne animáljunk */
@media (prefers-reduced-motion: reduce) {
	.tse * {
		transition: none !important;
	}
}