.hlpti,
.hlpti * {
	box-sizing: border-box;
	font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif !important;
}

.hlpti {
	--hlpti-ink: #302719;
	--hlpti-muted: #6c6254;
	--hlpti-line: #e5d8c2;
	--hlpti-accent: #82520e;
	--hlpti-paper: #fffdf8;
	color: var(--hlpti-ink);
	line-height: 1.65;
}

.hlpti__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .8rem 1.2rem;
	margin-bottom: 1rem;
}

.hlpti__header h2 {
	margin: 0;
	font-size: clamp(1.45rem, 2.6vw, 2rem);
	font-weight: 750;
	line-height: 1.35;
}

.hlpti__header p {
	margin: .35rem 0 0;
	color: var(--hlpti-muted);
}

.hlpti__now-button,
.hlpti__submit {
	min-height: 44px;
	padding: .55rem 1rem;
	border: 1px solid #704609;
	border-radius: 9px;
	background: linear-gradient(135deg, #a76c16, #74470d);
	box-shadow: 0 2px 6px rgba(69, 44, 12, .16);
	color: #fff !important;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.hlpti__now-button:hover,
.hlpti__submit:hover {
	background: #603b0b;
	color: #fff !important;
}

.hlpti__controls {
	display: flex;
	align-items: end;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0 0 .8rem;
	padding: 1rem;
	border: 1px solid var(--hlpti-line);
	border-radius: 12px;
	background: var(--hlpti-paper);
}

.hlpti__controls label {
	display: grid;
	min-width: 9.5rem;
	flex: 1 1 9.5rem;
	gap: .3rem;
	font-weight: 650;
}

.hlpti__controls input,
.hlpti__controls select {
	width: 100%;
	min-height: 44px;
	padding: .45rem .6rem;
	border: 1px solid #b9a58e;
	border-radius: 8px;
	background: #fff;
	color: #29231a;
	font: inherit;
}

.hlpti__controls input:focus-visible,
.hlpti__controls select:focus-visible,
.hlpti__controls button:focus-visible,
.hlpti__header button:focus-visible {
	outline: 2px solid #9a5c0b;
	outline-offset: 2px;
}

.hlpti__timestamp {
	margin: .7rem 0 .2rem;
	color: #4d3514;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 750;
	text-align: center;
}

.hlpti__status {
	width: fit-content;
	max-width: 100%;
	margin: .35rem auto 1rem;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: #f4f0e8;
	color: var(--hlpti-muted);
	font-size: .93rem;
	text-align: center;
}

.hlpti__status.is-error,
.hlpti__error,
.hlpti--notice {
	border-inline-start: 4px solid #b42318;
	border-radius: 6px;
	background: #fff2f0;
	color: #7a271a;
}

.hlpti--notice,
.hlpti__error {
	padding: .8rem 1rem;
}

.hlpti--notice p,
.hlpti__error { margin: 0; }

.hlpti__readings {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
}

.hlpti__reading {
	min-width: 0;
	padding: 1rem;
	border: 1px solid var(--hlpti-line);
	border-radius: 13px;
	background: linear-gradient(180deg, #fff 0%, #fffdf9 100%);
	box-shadow: 0 4px 14px rgba(71, 48, 16, .06);
}

.hlpti__reading h3 {
	margin: 0 0 .75rem;
	color: #633e0d;
	font-size: 1.1rem;
	font-weight: 750;
}

.hlpti__interpretation {
	margin: 0;
	color: #3c352c;
	font-size: .94rem;
	line-height: 1.65;
}

.hlpti__empty {
	margin: 0;
	color: #746b5e;
	font-size: .91rem;
}

.hlpti__disclaimer {
	margin: 1rem 0 0;
	padding: .75rem .9rem;
	border-inline-start: 3px solid #a6782b;
	background: #fffaf0;
	color: #66583f;
	font-size: .9rem;
}

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

@media (max-width: 600px) {
	.hlpti__header { align-items: stretch; }
	.hlpti__header button { width: 100%; }
	.hlpti__controls { align-items: stretch; }
	.hlpti__controls label { flex-basis: 100%; }
	.hlpti__controls button { width: 100%; }
	.hlpti__readings { grid-template-columns: minmax(0, 1fr); }
}