:root {
	--ftbwpsp-color-accent: #00b1b3;
	--ftbwpsp-color-slate-50: #f8fafc;
	--ftbwpsp-color-slate-200: #e2e8f0;
	--ftbwpsp-color-slate-500: #64748b;
	--ftbwpsp-color-slate-700: #334155;
	--ftbwpsp-color-slate-900: #0f172a;
	--ftbwpsp-color-white: #ffffff;
	--ftbwpsp-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
	--ftbwpsp-font-slab: "Roboto Slab", Inter, system-ui, sans-serif;
}

.tool-container,
.ftbwpsp-tool {
	font-family: var(--ftbwpsp-font-sans) !important;
	font-size: 16px !important;
	line-height: 1.625 !important;
	color: var(--ftbwpsp-color-slate-700) !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 36px !important;
	background: var(--ftbwpsp-color-white) !important;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tool-container h1,
.ftbwpsp-tool h1 {
	font-family: var(--ftbwpsp-font-slab) !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 0 12px !important;
	color: var(--ftbwpsp-color-slate-900) !important;
}

.tool-container h2,
.ftbwpsp-tool h2 {
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	margin: 40px 0 14px !important;
	color: var(--ftbwpsp-color-slate-900) !important;
}

.tool-container h3,
.ftbwpsp-tool h3 {
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 10px !important;
	color: var(--ftbwpsp-color-slate-900) !important;
}

.tool-container p,
.tool-container li,
.tool-container label,
.tool-container td,
.tool-container th,
.ftbwpsp-tool p,
.ftbwpsp-tool li,
.ftbwpsp-tool label,
.ftbwpsp-tool td,
.ftbwpsp-tool th {
	font-size: 16px !important;
	line-height: 1.625 !important;
	color: var(--ftbwpsp-color-slate-700) !important;
}

.tool-container label,
.ftbwpsp-tool label {
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.025em !important;
	text-transform: uppercase !important;
	color: var(--ftbwpsp-color-slate-500) !important;
}

.tool-container small,
.ftbwpsp-tool small {
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--ftbwpsp-color-slate-500) !important;
}

.tool-card,
.ftbwpsp-tool > div {
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	padding: 20px !important;
	background: var(--ftbwpsp-color-white) !important;
	margin-bottom: 34px !important;
}

.tool-input,
.ftbwpsp-tool input[type="text"],
.ftbwpsp-tool input[type="number"],
.ftbwpsp-tool input[type="url"],
.ftbwpsp-tool input[type="email"],
.ftbwpsp-tool input[type="search"],
.ftbwpsp-tool input[type="password"],
.ftbwpsp-tool select,
.ftbwpsp-tool textarea {
	width: 100% !important;
	min-height: 46px !important;
	font-family: var(--ftbwpsp-font-sans) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	border: 1px solid var(--ftbwpsp-color-slate-200) !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	background: var(--ftbwpsp-color-white) !important;
	color: var(--ftbwpsp-color-slate-900) !important;
}

.ftbwpsp-tool textarea {
	min-height: 120px !important;
}

.tool-input:focus,
.ftbwpsp-tool input:focus,
.ftbwpsp-tool select:focus,
.ftbwpsp-tool textarea:focus {
	border-color: var(--ftbwpsp-color-accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(0, 177, 179, 0.18) !important;
}

.tool-input::placeholder,
.ftbwpsp-tool input::placeholder,
.ftbwpsp-tool textarea::placeholder {
	font-size: 12px !important;
	color: var(--ftbwpsp-color-slate-500) !important;
}

.tool-button,
.ftbwpsp-btn,
.ftbwpsp-tool button,
.ftbwpsp-tool a.ftbwpsp-btn {
	background: var(--ftbwpsp-color-accent) !important;
	color: #ffffff !important;
	padding: 12px 18px !important;
	min-height: 44px !important;
	border-radius: 6px !important;
	font-size: clamp(12px, 1.2vw, 15px) !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.025em !important;
	text-transform: uppercase !important;
	border: 1px solid var(--ftbwpsp-color-accent) !important;
	text-decoration: none !important;
}

.tool-button:hover,
.ftbwpsp-btn:hover,
.ftbwpsp-tool button:hover,
.ftbwpsp-tool a.ftbwpsp-btn:hover {
	background: #019c9d !important;
	border-color: #019c9d !important;
	opacity: 0.95 !important;
}

.tool-result,
[class*="__summary"],
[class*="__stats"] {
	background: var(--ftbwpsp-color-slate-50) !important;
	border-left: 4px solid var(--ftbwpsp-color-accent) !important;
	padding: 15px !important;
	margin-top: 20px !important;
}

.tool-status,
[class*="is-good"],
[class*="is-average"],
[class*="is-poor"] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: 600 !important;
}

.tool-status.is-good,
[class*="is-good"] {
	color: #2a9d8f !important;
}

.tool-status.is-average,
[class*="is-average"] {
	color: #f4a261 !important;
}

.tool-status.is-poor,
[class*="is-poor"] {
	color: #e63946 !important;
}

[class*="__actions"] {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-top: 10px !important;
}

[class*="__grid"] {
	row-gap: 16px !important;
	column-gap: 16px !important;
}
