.hlbaa {
	--hlbaa-ink: #34271f;
	--hlbaa-muted: #76695e;
	--hlbaa-line: #e8d7bf;
	--hlbaa-paper: #fffdf9;
	color: var(--hlbaa-ink);
	font-family: "Noto Sans Thai", sans-serif !important;
	line-height: 1.65;
}

.hlbaa *,
.hlbaa *::before,
.hlbaa *::after {
	box-sizing: border-box;
	font-family: "Noto Sans Thai", sans-serif !important;
}

.hlbaa [hidden] {
	display: none !important;
}

.hlbaa__intro {
	margin: 0 0 1.4rem;
}

.hlbaa__intro h2,
.hlbaa__results-title {
	margin: 0 0 .45rem;
	color: var(--hlbaa-ink);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
}

.hlbaa__intro p {
	margin: .3rem 0 0;
	color: var(--hlbaa-muted);
}

.hlbaa__eyebrow {
	color: #a45419;
	font-size: .9rem;
	font-weight: 700;
}

.hlbaa__form {
	max-width: 880px;
	margin: 0 0 .5rem;
	padding: 1.2rem;
	border: 1px solid var(--hlbaa-line);
	border-radius: 14px;
	background: var(--hlbaa-paper);
}

.hlbaa__fields {
	display: grid;
	grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.35fr);
	gap: 1rem;
}

.hlbaa__field {
	min-width: 0;
}

.hlbaa__field:last-child {
	grid-column: 1 / -1;
}

.hlbaa__field label {
	display: block;
	margin: 0 0 .4rem;
	font-weight: 650;
}

.hlbaa__field input,
.hlbaa__field select {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: .65rem .8rem;
	border: 1px solid #cbbcae;
	border-radius: 8px;
	background: #fff;
	color: var(--hlbaa-ink);
	font-size: 1rem;
}

.hlbaa__field input:focus,
.hlbaa__field select:focus {
	border-color: #985a11;
	outline: 2px solid #985a1133;
	outline-offset: 1px;
}

.hlbaa__help,
.hlbaa__privacy,
.hlbaa__roles-intro {
	margin: .4rem 0 0;
	color: var(--hlbaa-muted);
	font-size: .92rem;
}

.hlbaa__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	margin-top: 1rem;
}

.hlbaa__button,
.hlbaa__clear {
	min-height: 46px;
	padding: .6rem 1.15rem;
	border: 1px solid #985a11;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
}

.hlbaa__button {
	background: #985a11;
	color: #fff;
}

.hlbaa__button:hover,
.hlbaa__button:focus-visible {
	background: #78450a;
	color: #fff;
}

.hlbaa__clear {
	background: #fff;
	color: #78450a;
}

.hlbaa__clear:hover,
.hlbaa__clear:focus-visible {
	background: #fff8ed;
}

.hlbaa__message {
	margin: 1rem 0 0;
	padding: .8rem 1rem;
	border: 1px solid #e6c48a;
	border-radius: 8px;
	background: #fff8e9;
	color: var(--hlbaa-ink);
}

.hlbaa__privacy {
	margin: .6rem 0 0;
}

.hlbaa__results {
	margin-top: 1.6rem;
}

.hlbaa__results-day {
	margin: 0 0 .8rem;
	font-size: 1.1rem;
	font-weight: 650;
}

.hlbaa__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .8rem;
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--hlbaa-line);
	border-radius: 12px;
	background: #fff8e9;
}

.hlbaa__summary-label {
	color: var(--hlbaa-muted);
}

.hlbaa__summary-value {
	font-size: 1.5rem;
}

.hlbaa__summary-note {
	flex-basis: 100%;
	margin: .2rem 0 0;
	color: var(--hlbaa-muted);
	font-size: .92rem;
}

.hlbaa__digit-prediction {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid #e3c991;
	border-left: 4px solid #985a11;
	border-radius: 12px;
	background: #fffaf0;
}

.hlbaa__digit-prediction-title {
	margin: 0 0 .55rem;
	color: var(--hlbaa-ink);
	font-size: 1.25rem;
	font-weight: 700;
}

.hlbaa__digit-prediction-meaning {
	margin: 0;
	white-space: pre-line;
}

.hlbaa__roles-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
}

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

.hlbaa__role {
	min-width: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--hlbaa-line);
	border-radius: 12px;
	background: #fff;
}

.hlbaa__role.is-match {
	border-color: #a45419;
	background: #fff8e9;
	box-shadow: 0 0 0 1px #a4541922;
}

.hlbaa__role-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem .75rem;
}

.hlbaa__role-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
}

.hlbaa__role-star {
	color: var(--hlbaa-muted);
	font-size: .92rem;
}

.hlbaa__role-color {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: .65rem 0 0;
	padding: .3rem .65rem .3rem .4rem;
	border: 1px solid var(--hlbaa-line);
	border-radius: 999px;
	background: #fffdf9;
	font-size: .92rem;
}

.hlbaa__role-color-swatch {
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 1.25rem;
	border: 1px solid #8d8177;
	border-radius: 50%;
}

.hlbaa__role-color-name {
	font-weight: 650;
}

.hlbaa__role-status {
	display: inline-block;
	margin: .55rem 0 .2rem;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: #f5f1eb;
	color: var(--hlbaa-muted);
	font-size: .83rem;
}

.hlbaa__role.is-match .hlbaa__role-status {
	background: #985a11;
	color: #fff;
}

.hlbaa__role-meaning {
	margin: .4rem 0 0;
}

.hlbaa__unmatched {
	margin: 1rem 0 0;
	padding: .85rem 1rem;
	border-left: 3px solid #b78736;
	background: #fff8e9;
}

@media (max-width: 680px) {
	.hlbaa__fields,
	.hlbaa__roles {
		grid-template-columns: 1fr;
	}

	.hlbaa__field:last-child {
		grid-column: auto;
	}
}