.haoma-service-hub,
.haoma-tech-form {
	--haoma-bg: transparent;
	--haoma-surface: #ffffff;
	--haoma-surface-strong: #fff6f8;
	--haoma-text: #2d2a26;
	--haoma-muted: #6b6760;
	--haoma-border: #f0e8d8;
	--haoma-green: #ff5e87;
	--haoma-green-dark: #e84570;
	--haoma-danger: #c24545;
	--haoma-radius: 22px;
	--haoma-line-green: #06c755;
	color-scheme: light;
	box-sizing: border-box;
	color: var(--haoma-text);
	font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
	line-height: 1.7;
}

.haoma-service-hub *,
.haoma-service-hub *::before,
.haoma-service-hub *::after,
.haoma-tech-form *,
.haoma-tech-form *::before,
.haoma-tech-form *::after {
	box-sizing: inherit;
}

.haoma-service-hub {
	width: min(100%, 1040px);
	margin-inline: auto;
	padding: 8px 0 48px;
	background: transparent;
	border-radius: 0;
}

.haoma-tech-form {
	width: min(100%, 920px);
	margin-inline: auto;
	padding: clamp(16px, 4vw, 36px);
}

.haoma-service-hub h1,
.haoma-service-hub h2,
.haoma-service-hub h3,
.haoma-service-hub h4,
.haoma-tech-form h2,
.haoma-tech-form h3 {
	margin: 0 0 12px;
	color: var(--haoma-text);
	font-weight: 750;
	line-height: 1.25;
}

.haoma-service-hub h1,
#haoma-sop-title {
	max-width: 14em;
	font-size: clamp(1.85rem, 4.6vw, 2.65rem);
	letter-spacing: -0.03em;
	font-weight: 800;
}

.haoma-service-hub h2,
.haoma-tech-form h2 {
	font-size: clamp(1.55rem, 4vw, 2.2rem);
}

.haoma-service-hub p,
.haoma-tech-form p {
	margin: 0 0 18px;
	color: var(--haoma-muted);
}

.haoma-kicker {
	margin-bottom: 8px !important;
	color: var(--haoma-green) !important;
	font-size: 0.86rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.haoma-panel,
.haoma-hub-header,
.haoma-sop-guide {
	padding: clamp(20px, 4vw, 38px);
	border: 1px solid var(--haoma-border);
	border-radius: var(--haoma-radius);
	background: var(--haoma-surface);
	box-shadow: 0 1px 3px rgba(45, 42, 38, 0.05);
}

.haoma-hub-header {
	display: grid;
	align-items: end;
	min-height: 0;
	padding: clamp(24px, 4vw, 40px);
	background: var(--haoma-surface);
	box-shadow: 0 1px 3px rgba(45, 42, 38, 0.05);
}

.haoma-hub-lead {
	margin: 0 0 8px !important;
	max-width: 36em;
	font-size: 1.05rem;
}

.haoma-hub-lead strong {
	color: var(--haoma-text);
}

.haoma-quick-actions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 26px;
}

.haoma-button-line,
.haoma-service-hub .haoma-button-line {
	border-color: var(--haoma-line-green);
	background: var(--haoma-line-green);
	color: #ffffff;
	box-shadow: 0 6px 16px -4px rgba(6, 199, 85, 0.35);
}

.haoma-button-line:hover,
.haoma-button-line:active {
	border-color: #059d44;
	background: #059d44;
	color: #ffffff;
}

.haoma-policy-card {
	margin-top: 22px;
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid var(--haoma-border);
	border-left: 5px solid var(--haoma-green);
	border-radius: var(--haoma-radius);
	background: var(--haoma-surface);
}

.haoma-policy-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 20px;
	color: var(--haoma-muted);
}

.haoma-policy-list strong {
	color: var(--haoma-text);
}

.haoma-tech-entry .haoma-button {
	margin-top: 4px;
}

.haoma-fee-note {
	border-left: 4px solid #d39118;
	font-weight: 700;
}

.haoma-fees .haoma-form-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.haoma-button,
.haoma-service-hub .haoma-button,
.haoma-tech-form .haoma-button {
	display: inline-flex;
	min-width: 0;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 2px solid var(--haoma-green);
	border-radius: 999px;
	background: var(--haoma-green);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 6px 16px -4px rgba(255, 94, 135, 0.35);
}

.haoma-button:hover,
.haoma-button:active {
	border-color: var(--haoma-green-dark);
	background: var(--haoma-green-dark);
	color: #ffffff;
}

.haoma-button:active {
	transform: translateY(1px);
}

.haoma-button-secondary,
.haoma-service-hub .haoma-button-secondary,
.haoma-tech-form .haoma-button-secondary {
	background: transparent;
	color: var(--haoma-green-dark);
}

.haoma-button-secondary:hover,
.haoma-button-secondary:active {
	color: #ffffff;
	box-shadow: none;
}

.haoma-service-hub :focus-visible,
.haoma-tech-form :focus-visible {
	outline: 3px solid rgba(255, 94, 135, 0.35);
	outline-offset: 3px;
}

.haoma-sop-guide {
	margin-top: 22px;
}

.haoma-accordion {
	overflow: hidden;
	border: 1px solid var(--haoma-border);
	border-radius: var(--haoma-radius);
	background: var(--haoma-surface);
}

.haoma-accordion-item + .haoma-accordion-item {
	border-top: 1px solid var(--haoma-border);
}

.haoma-accordion-item > h3 {
	margin: 0;
}

.haoma-accordion-button {
	display: flex;
	width: 100%;
	min-height: 60px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border: 0;
	background: transparent;
	color: var(--haoma-text);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 750;
	text-align: left;
	cursor: pointer;
}

.haoma-accordion-button:hover {
	background: var(--haoma-surface-strong);
}

.haoma-accordion-mark {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.haoma-accordion-mark::before,
.haoma-accordion-mark::after {
	position: absolute;
	top: 8px;
	left: 2px;
	width: 14px;
	height: 2px;
	background: currentColor;
	content: "";
}

.haoma-accordion-mark::after {
	transform: rotate(90deg);
}

.haoma-accordion-button[aria-expanded="true"] .haoma-accordion-mark::after {
	display: none;
}

.haoma-accordion-panel {
	padding: 0 18px 22px;
}

.haoma-sop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.haoma-sop-card {
	overflow: hidden;
	border: 1px solid var(--haoma-border);
	border-radius: var(--haoma-radius);
	background: var(--haoma-bg);
}

.haoma-sop-image {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.haoma-sop-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.haoma-sop-content {
	padding: 18px;
}

.haoma-sop-content p {
	margin-bottom: 12px;
}

.haoma-text-link {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	color: var(--haoma-green-dark);
	font-weight: 750;
	text-underline-offset: 4px;
}

.haoma-hub-warranty {
	margin-top: 22px;
}

.haoma-hub-warranty > .haoma-service-hub {
	width: 100%;
	padding: 0;
	background: transparent;
}

.haoma-warranty-form,
.haoma-tech-report-form {
	display: grid;
	gap: 18px;
}

.haoma-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.haoma-field,
.haoma-signature-field {
	display: grid;
	gap: 7px;
}

.haoma-service-hub label,
.haoma-tech-form label,
.haoma-checklist legend {
	color: var(--haoma-text);
	font-weight: 700;
}

.haoma-service-hub input[type="text"],
.haoma-tech-form input[type="text"],
.haoma-tech-form input[type="tel"],
.haoma-tech-form input[type="date"],
.haoma-tech-form input[type="number"],
.haoma-tech-form select,
.haoma-tech-form input[type="file"] {
	width: 100%;
	min-height: 50px;
	padding: 10px 12px;
	border: 1px solid var(--haoma-border);
	border-radius: 12px;
	background: #ffffff;
	color: var(--haoma-text);
	font: inherit;
}

.haoma-field-help {
	margin: 0 !important;
	font-size: 0.88rem;
}

.haoma-result,
.haoma-notice,
.haoma-empty-state {
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--haoma-surface-strong);
	color: var(--haoma-text);
}

.haoma-result.is-error,
.haoma-notice-error {
	border-left: 4px solid var(--haoma-danger);
}

.haoma-result.is-success {
	border-left: 4px solid var(--haoma-green);
}

.haoma-result a {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	color: var(--haoma-green-dark);
	font-weight: 750;
}

.haoma-checklist {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--haoma-border);
	border-radius: var(--haoma-radius);
}

.haoma-checklist label,
.haoma-consent {
	display: flex;
	min-height: 48px;
	align-items: center;
	gap: 12px;
}

.haoma-checklist input,
.haoma-consent input {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	accent-color: var(--haoma-green);
}

.haoma-disclaimer {
	max-height: 280px;
	overflow-y: auto;
	padding: 18px;
	border: 1px solid #f1b0b0;
	border-left: 4px solid var(--haoma-danger);
	border-radius: var(--haoma-radius);
	background: #fff5f5;
}

.haoma-disclaimer h3,
.haoma-disclaimer p {
	color: var(--haoma-danger) !important;
	font-weight: 700;
}

.haoma-signature-canvas {
	width: 100%;
	height: auto;
	max-height: 280px;
	border: 2px solid var(--haoma-border);
	border-radius: var(--haoma-radius);
	background: #ffffff;
	touch-action: none;
}

.haoma-signature-field .haoma-button-secondary {
	justify-self: start;
}

@media (max-width: 767px) {
	.haoma-service-hub {
		padding: 8px 12px 36px;
		border-radius: 0;
	}

	.haoma-hub-header {
		min-height: auto;
	}

	.haoma-quick-actions,
	.haoma-sop-grid,
	.haoma-form-grid,
	.haoma-fees .haoma-form-grid {
		grid-template-columns: 1fr;
	}

	.haoma-quick-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.haoma-panel,
	.haoma-hub-header,
	.haoma-sop-guide {
		padding: 20px;
	}

	.haoma-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.haoma-service-hub *,
	.haoma-tech-form * {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}