.kakarte-bmi,
.kakarte-bmi * {
	box-sizing: border-box;
}

.kakarte-bmi {
	--bmi-primary: #2563eb;
	--bmi-primary-dark: #1d4ed8;
	--bmi-primary-light: #eff6ff;
	--bmi-border: #dbe4f0;
	--bmi-text: #17233d;
	--bmi-subtext: #64748b;
	--bmi-success: #169c5c;
	--bmi-success-background: #ecfdf3;
	--bmi-warning: #d97706;
	--bmi-warning-background: #fff7ed;
	--bmi-danger: #dc2626;
	--bmi-danger-background: #fff1f2;

	max-width: 420px;
	width: 100% !important;
	margin: 24px auto !important;
	padding: 20px !important;
	color: var(--bmi-text);
	background: #fff;
	border: 1px solid var(--bmi-border);
	border-radius: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	line-height: 1.6;
}

.kakarte-bmi__title {
	display: flex !important;
	align-items: center !important;
	gap: 9px;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--bmi-text) !important;
	background: none !important;
	border: 0 !important;
	white-space: normal !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
}

.kakarte-bmi__title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #fff;
	background: var(--bmi-primary);
	border-radius: 50%;
	font-size: 15px;
	font-weight: 800;
}

.kakarte-bmi__lead {
	margin: 6px 0 16px !important;
	color: var(--bmi-subtext);
	font-size: 13px !important;
}

.kakarte-bmi__form {
	margin: 0;
}

.kakarte-bmi__field {
	margin-bottom: 12px;
}

.kakarte-bmi__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bmi-text);
}

.kakarte-bmi__input-wrap {
	display: flex !important;
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kakarte-bmi__input-wrap:focus-within {
	border-color: var(--bmi-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.kakarte-bmi__input {
	flex: 1 !important;
	min-width: 0 !important;
	width: auto !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	color: var(--bmi-text);
	background: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none;
	box-shadow: none !important;
	font: inherit;
	font-size: 15px !important;
	font-weight: 600;
	appearance: textfield;
}

.kakarte-bmi__input::-webkit-outer-spin-button,
.kakarte-bmi__input::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.kakarte-bmi__input::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

.kakarte-bmi__unit {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 44px !important;
	margin: 0 !important;
	color: #334155;
	background: #f1f5f9;
	border-left: 1px solid #dbe4f0;
	font-size: 13px;
	font-weight: 700;
}

.kakarte-bmi__error {
	margin: 0 0 12px;
	padding: 10px 12px;
	color: #b91c1c;
	background: var(--bmi-danger-background);
	border: 1px solid #fecaca;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
}

.kakarte-bmi__result {
	margin-top: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--bmi-border);
}

.kakarte-bmi__result-score {
	margin: 0 0 6px !important;
	font-size: 16px !important;
	font-weight: 700;
}

.kakarte-bmi__result-score strong {
	color: var(--bmi-primary);
	font-size: 20px;
}

.kakarte-bmi__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-left: 4px !important;
	padding: 2px 10px;
	color: var(--bmi-primary-dark);
	background: var(--bmi-primary-light);
	border: 1px solid #93c5fd;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.kakarte-bmi__result-message {
	margin: 0 0 6px !important;
	color: #475569;
	font-size: 13px !important;
}

.kakarte-bmi__result-standard {
	margin: 0 !important;
	color: #334155;
	font-size: 13px !important;
}

.kakarte-bmi__result-standard strong {
	color: var(--bmi-primary-dark);
}

.kakarte-bmi__result-difference {
	margin: 10px 0 0 !important;
	padding: 10px 12px;
	color: #334155;
	background: #f8fafc;
	border-left: 4px solid var(--bmi-primary);
	border-radius: 4px 8px 8px 4px;
	font-size: 13px !important;
}

.kakarte-bmi__result-difference strong {
	color: var(--bmi-primary-dark);
	font-size: 15px;
}

.kakarte-bmi__result.is-underweight .kakarte-bmi__badge {
	color: #1d4ed8;
	background: #eff6ff;
	border-color: #93c5fd;
}

.kakarte-bmi__result.is-normal .kakarte-bmi__badge {
	color: var(--bmi-success);
	background: var(--bmi-success-background);
	border-color: #86efac;
}

.kakarte-bmi__result.is-obesity-1 .kakarte-bmi__badge {
	color: var(--bmi-warning);
	background: var(--bmi-warning-background);
	border-color: #fdba74;
}

.kakarte-bmi__result.is-obesity-2 .kakarte-bmi__badge,
.kakarte-bmi__result.is-obesity-3 .kakarte-bmi__badge,
.kakarte-bmi__result.is-obesity-4 .kakarte-bmi__badge {
	color: var(--bmi-danger);
	background: var(--bmi-danger-background);
	border-color: #fda4af;
}

.kakarte-bmi__disclaimer {
	margin: 14px 0 0 !important;
	color: var(--bmi-subtext);
	font-size: 11px !important;
}

.kakarte-bmi [hidden] {
	display: none !important;
}

@media (max-width: 480px) {
	.kakarte-bmi {
		padding: 16px !important;
		border-radius: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kakarte-bmi__input-wrap {
		transition: none;
	}
}
