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

.hltc-planetary-chart {
	--hltc-chart-ink: #342617;
	--hltc-chart-muted: #716557;
	--hltc-chart-line: #9ab9b8;
	--hltc-chart-accent: #8b5a18;
	max-width: 100%;
	color: inherit;
	line-height: 1.55;
}

.hltc-planetary-chart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .8em 1.2em;
	margin-bottom: 1em;
}

.hltc-planetary-chart__header h2 {
	margin: 0;
	font: inherit;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 700;
}

.hltc-planetary-chart__subtitle {
	margin: .2em 0 0;
	color: var(--hltc-chart-muted);
	font-size: .95em;
}

.hltc-planetary-chart__live-button,
.hltc-planetary-chart__submit {
	min-height: 44px;
	padding: .55em 1em;
	border: 1px solid #774a11;
	border-radius: 9px;
	background: linear-gradient(135deg, #a66a18, #7c4b10);
	box-shadow: 0 2px 6px rgba(69, 44, 12, .16);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.hltc-planetary-chart__live-button:hover,
.hltc-planetary-chart__submit:hover { filter: brightness(.94); }

.hltc-planetary-chart__live-button[aria-pressed="false"] {
	border-color: #b8a68e;
	background: #fff;
	box-shadow: none;
	color: var(--hltc-chart-ink);
}

.hltc-planetary-chart__live-dot {
	display: inline-block;
	width: .62em;
	height: .62em;
	margin-inline-end: .4em;
	border-radius: 50%;
	background: #a8edb5;
	vertical-align: .04em;
}

.hltc-planetary-chart__live-button[aria-pressed="false"] .hltc-planetary-chart__live-dot { background: #aaa; }

.hltc-planetary-chart__controls {
	display: flex;
	align-items: end;
	flex-wrap: wrap;
	gap: .65em;
	margin: 0 0 .8em;
	padding: .85em;
	border: 1px solid #e5d7c1;
	border-radius: 11px;
	background: #fffdf8;
}

.hltc-planetary-chart__controls label {
	display: grid;
	min-width: 10em;
	gap: .25em;
	font-weight: 600;
}

.hltc-planetary-chart__controls input {
	min-height: 44px;
	padding: .45em .6em;
	border: 1px solid #b9a58e;
	border-radius: 7px;
	background: #fff;
	color: inherit;
	font: inherit;
}

.hltc-planetary-chart__controls input:focus-visible,
.hltc-planetary-chart__controls button:focus-visible,
.hltc-planetary-chart__live-button:focus-visible {
	outline: 2px solid #a45e0a;
	outline-offset: 2px;
}

.hltc-planetary-chart__timestamp {
	margin: .65em 0 .3em;
	font-size: 1.08em;
	font-weight: 700;
	text-align: center;
}

.hltc-planetary-chart--compact .hltc-planetary-chart__timestamp {
	margin: 0 0 .65em;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	text-align: left;
}

.hltc-planetary-chart__status {
	width: fit-content;
	max-width: 100%;
	margin: .35em auto .8em;
	padding: .35em .75em;
	border-radius: 999px;
	background: #f4f0e8;
	color: var(--hltc-chart-muted);
	font-size: .9em;
	text-align: center;
}

.hltc-planetary-chart__status.is-error,
.hltc-planetary-chart__error {
	border-inline-start: 4px solid #b42318;
	border-radius: 5px;
	background: #fff2f0;
	color: #7a1710;
}

.hltc-planetary-chart__status.is-error { border-radius: 7px; }
.hltc-planetary-chart__error { padding: .65em .8em; }

.hltc-planetary-chart__status--visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hltc-planetary-chart__compact-layout {
	display: grid;
	grid-template-columns: minmax(250px, .95fr) minmax(0, 1.65fr);
	align-items: center;
	gap: clamp(.8em, 2.8vw, 2em);
}

.hltc-planetary-chart--compact .hltc-planetary-chart__wheel {
	width: 100%;
	margin: 0;
	padding: .2em;
}

.hltc-planetary-chart--compact .hltc-planetary-chart__positions {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: none;
	margin: 0;
	gap: .6em;
}

.hltc-planetary-chart--compact .hltc-planetary-chart__position {
	grid-template-columns: 2.3em minmax(4.3em, .9fr) minmax(0, 1.2fr);
	gap: .45em;
	padding: .65em .7em;
	border-radius: 10px;
}

.hltc-planetary-chart__wheel {
	width: min(100%, 640px);
	margin: 0 auto;
	padding: clamp(.2em, 2vw, .75em);
	border-radius: 18px;
	background: radial-gradient(circle, #fff 0, #fff 64%, #f8f4eb 100%);
}

.hltc-planetary-chart__wheel svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.hltc-planetary-chart__sector { stroke: #a8c2c0; stroke-width: 1.5; }
.hltc-planetary-chart__sector--even { fill: #fbf8f0; }
.hltc-planetary-chart__sector--odd { fill: #edf5f4; }
.hltc-planetary-chart__outer-ring,
.hltc-planetary-chart__inner-ring { fill: none; stroke: #438a8e; stroke-width: 2.1; }
.hltc-planetary-chart__center { fill: #fffdf8; stroke: #438a8e; stroke-width: 2; }
.hltc-planetary-chart__sign-label { fill: #294d4f; font-size: 22px; font-weight: 700; }
.hltc-planetary-chart__center-title { fill: #674513; font-size: 16px; font-weight: 700; }
.hltc-planetary-chart__center-subtitle { fill: #716557; font-size: 12px; }
.hltc-planetary-chart__planet-badge { fill: var(--hltc-planet-fill, #fffaf0); stroke: var(--hltc-planet-stroke, var(--hltc-planet-fill, #855715)); stroke-width: 1.7; }
.hltc-planetary-chart__planet-symbol { fill: var(--hltc-planet-ink, #332619); font-size: 20px; font-weight: 800; pointer-events: none; }
.hltc-planetary-chart__planet title { display: none; }

.hltc-planetary-chart [data-planet-digit="0"] { --hltc-planet-fill: #424242; --hltc-planet-ink: #fff; }
.hltc-planetary-chart [data-planet-digit="1"] { --hltc-planet-fill: #f21d18; --hltc-planet-ink: #fff; }
.hltc-planetary-chart [data-planet-digit="2"] { --hltc-planet-fill: #ffe400; --hltc-planet-ink: #28220d; }
.hltc-planetary-chart [data-planet-digit="3"] { --hltc-planet-fill: #e900d5; --hltc-planet-ink: #fff; }
.hltc-planetary-chart [data-planet-digit="4"] { --hltc-planet-fill: #00c66a; --hltc-planet-ink: #123222; }
.hltc-planetary-chart [data-planet-digit="5"] { --hltc-planet-fill: #f7bd83; --hltc-planet-ink: #3a2a18; }
.hltc-planetary-chart [data-planet-digit="6"] { --hltc-planet-fill: #13afe8; --hltc-planet-ink: #092d3a; }
.hltc-planetary-chart [data-planet-digit="7"] { --hltc-planet-fill: #71339e; --hltc-planet-ink: #fff; }
.hltc-planetary-chart [data-planet-digit="8"] { --hltc-planet-fill: #171717; --hltc-planet-ink: #fff; }
.hltc-planetary-chart [data-planet-digit="9"] { --hltc-planet-fill: #fff; --hltc-planet-ink: #30260c; --hltc-planet-stroke: #8a8a8a; }

.hltc-planetary-chart__positions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .55em;
	max-width: 760px;
	margin: .5em auto 0;
	padding: 0;
	list-style: none;
}

.hltc-planetary-chart__position {
	display: grid;
	grid-template-columns: 2.3em minmax(4.5em, .8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: .45em;
	min-width: 0;
	padding: .5em .65em;
	border: 1px solid #e8dece;
	border-radius: 8px;
	background: #fff;
}

.hltc-planetary-chart__position-symbol {
	display: inline-grid;
	place-items: center;
	width: 2.1em;
	height: 2.1em;
	border: 1px solid var(--hltc-planet-stroke, var(--hltc-planet-fill, #c69a53));
	border-radius: 50%;
	background: var(--hltc-planet-fill, #fff8e8);
	color: var(--hltc-planet-ink, #51380f);
	font-size: 1.06em;
	font-weight: 800;
}

.hltc-planetary-chart__position-name { font-weight: 700; }
.hltc-planetary-chart__position-value { min-width: 0; color: var(--hltc-chart-muted); text-align: end; white-space: nowrap; }
.hltc-planetary-chart__note { margin: .8em 0 0; color: var(--hltc-chart-muted); font-size: .88em; text-align: center; }
.hltc-planetary-chart.is-loading .hltc-planetary-chart__wheel { opacity: .72; }

@media (max-width: 620px) {
	.hltc-planetary-chart__header { align-items: stretch; }
	.hltc-planetary-chart__live-button { align-self: flex-start; }
	.hltc-planetary-chart__controls { align-items: stretch; }
	.hltc-planetary-chart__controls label { flex: 1 1 9em; min-width: 0; }
	.hltc-planetary-chart__submit { flex: 1 1 100%; }
	.hltc-planetary-chart__positions { grid-template-columns: 1fr; }
	.hltc-planetary-chart__position { grid-template-columns: 2.3em minmax(4.5em, .8fr) minmax(0, 1.2fr); }
	.hltc-planetary-chart__compact-layout { grid-template-columns: 1fr; }
	.hltc-planetary-chart--compact .hltc-planetary-chart__wheel { width: min(100%, 380px); margin: 0 auto; }
	.hltc-planetary-chart--compact .hltc-planetary-chart__positions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
	.hltc-planetary-chart__wheel { transition: opacity .2s ease; }
}

/* Compact chart refresh: colorful celestial styling, scoped to its shortcode only. */
.hltc-planetary-chart--compact {
	--hltc-chart-ink: #4b3022;
	--hltc-chart-muted: #735b49;
	--hltc-chart-line: #c6a15a;
	--hltc-chart-accent: #9a702c;
	position: relative;
	container-type: inline-size;
	container-name: hltcCompactChart;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(.9rem, 2.6vw, 1.55rem);
	border: 1px solid #c6a15a;
	border-radius: 22px;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(198, 161, 90, .13), transparent 34%),
		radial-gradient(ellipse at 4% 100%, rgba(198, 161, 90, .08), transparent 35%),
		linear-gradient(145deg, #fbf8f1 0%, #f7f0e3 52%, #fbf8f1 100%);
	box-shadow: 0 12px 30px rgba(75, 48, 34, .08);
	color: var(--hltc-chart-ink);
}

.hltc-planetary-chart--compact .hltc-planetary-chart__timestamp {
	position: relative;
	z-index: 1;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1rem;
	padding: .68em 1.1em;
	border: 1px solid rgba(198, 161, 90, .72);
	border-radius: 999px;
	background: #fffefa;
	box-shadow: 0 4px 12px rgba(75, 48, 34, .05);
	color: #4b3022;
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.45;
	text-align: center;
}

.hltc-planetary-chart--compact .hltc-planetary-chart__compact-layout {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(220px, .92fr) minmax(0, 1.45fr);
	align-items: stretch;
	gap: clamp(.8rem, 2vw, 1.35rem);
}

.hltc-planetary-chart--compact .hltc-planetary-chart__wheel {
	align-self: center;
	padding: clamp(.55rem, 1.6vw, 1rem);
	border: 1px solid rgba(198, 161, 90, .72);
	border-radius: 18px;
	background: radial-gradient(circle at 48% 42%, #fffefa 0%, #fffefa 58%, #fbf8f1 100%);
	box-shadow: 0 7px 18px rgba(75, 48, 34, .06);
}

.hltc-planetary-chart--compact .hltc-planetary-chart__sector { stroke: #c6a15a; stroke-width: 1.5; }
.hltc-planetary-chart--compact .hltc-planetary-chart__sector--even { fill: #fbf8f1; }
.hltc-planetary-chart--compact .hltc-planetary-chart__sector--odd { fill: #f3ecdf; }
.hltc-planetary-chart--compact .hltc-planetary-chart__outer-ring,
.hltc-planetary-chart--compact .hltc-planetary-chart__inner-ring { stroke: #9a702c; stroke-width: 2.1; }
.hltc-planetary-chart--compact .hltc-planetary-chart__center { fill: #fffefa; stroke: #c6a15a; stroke-width: 2.1; }
.hltc-planetary-chart--compact .hltc-planetary-chart__sign-label { fill: #4b3022; }
.hltc-planetary-chart--compact .hltc-planetary-chart__center-title { fill: #7b5925; }
.hltc-planetary-chart--compact .hltc-planetary-chart__center-subtitle { fill: #735b49; }
.hltc-planetary-chart--compact .hltc-planetary-chart__planet-badge { filter: drop-shadow(0 2px 3px rgba(75, 48, 34, .16)); }

.hltc-planetary-chart--compact .hltc-planetary-chart__positions {
	align-content: center;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .68rem;
	margin: 0;
}

.hltc-planetary-chart--compact .hltc-planetary-chart__position {
	grid-template-columns: 2.45em minmax(4em, .85fr) minmax(0, 1.15fr);
	gap: .52em;
	min-height: 3.6rem;
	padding: .62em .72em;
	border: 1px solid rgba(198, 161, 90, .72);
	border-radius: 14px;
	background: #fffefa;
	box-shadow: 0 5px 14px rgba(75, 48, 34, .06);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hltc-planetary-chart--compact .hltc-planetary-chart__position-symbol {
	width: 2.2em;
	height: 2.2em;
	box-shadow: 0 3px 8px rgba(75, 48, 34, .14);
}

.hltc-planetary-chart--compact .hltc-planetary-chart__position-name {
	color: #4b3022;
	font-size: .95em;
}

.hltc-planetary-chart--compact .hltc-planetary-chart__position-value {
	color: #735b49;
	font-size: .86em;
	font-weight: 600;
}

.hltc-planetary-chart--compact.is-loading .hltc-planetary-chart__wheel { opacity: .62; }

@media (hover: hover) {
	.hltc-planetary-chart--compact .hltc-planetary-chart__position:hover {
		transform: translateY(-2px);
		border-color: #a37c35;
		box-shadow: 0 9px 20px rgba(75, 48, 34, .1);
	}
}

@container hltcCompactChart (max-width: 700px) {
	.hltc-planetary-chart--compact .hltc-planetary-chart__compact-layout { grid-template-columns: 1fr; }
	.hltc-planetary-chart--compact .hltc-planetary-chart__wheel { width: min(100%, 420px); margin: 0 auto; }
}

@container hltcCompactChart (max-width: 520px) {
	.hltc-planetary-chart--compact .hltc-planetary-chart__positions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.hltc-planetary-chart--compact .hltc-planetary-chart__position { transition: none; }
}