/**
 * 51 Global Tech — Free Tools
 * Styles for the WordPress Theme Checker.
 *
 * Uses the same design tokens as the 51web theme (navy / blue gradient, 14px
 * radius, soft shadows) so the tool sits naturally inside any page.
 *
 * @package w51-tools
 */

.w51t-tool {
	--w51t-navy: #081631;
	--w51t-navy-800: #0b1f45;
	--w51t-blue: #1e6ef5;
	--w51t-blue-400: #3b82f6;
	--w51t-cyan: #38bdf8;
	--w51t-text: #0f172a;
	--w51t-sub: #55647a;
	--w51t-line: #e5eaf2;
	--w51t-bg: #f5f8fc;
	--w51t-radius: 14px;
	--w51t-shadow: 0 10px 30px rgba(13, 38, 76, .08);
	--w51t-shadow-sm: 0 2px 8px rgba(13, 38, 76, .06);

	max-width: 1000px;
	margin: 0 auto;
	color: var(--w51t-text);
	font-size: 16px;
	line-height: 1.65;
}

.w51t-tool *,
.w51t-tool *::before,
.w51t-tool *::after {
	box-sizing: border-box;
}

/* ---------- Header ---------- */

.w51t-head {
	text-align: center;
	margin-bottom: 26px;
}

.w51t-title {
	margin: 0 0 10px;
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--w51t-navy);
}

.w51t-sub {
	margin: 0;
	color: var(--w51t-sub);
	font-size: 16px;
}

/* ---------- Form ---------- */

.w51t-form {
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-radius: var(--w51t-radius);
	box-shadow: var(--w51t-shadow);
	padding: 22px;
}

.w51t-input-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.w51t-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: var(--w51t-bg);
	color: var(--w51t-text);
	font-size: 15px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.w51t-input::placeholder {
	color: #93a1b5;
}

.w51t-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--w51t-blue);
	box-shadow: 0 0 0 3px rgba(30, 110, 245, .15);
}

.w51t-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.w51t-btn.primary {
	background: linear-gradient(92deg, var(--w51t-blue), var(--w51t-blue-400));
	color: #fff;
	box-shadow: 0 8px 24px rgba(30, 110, 245, .32);
}

.w51t-btn.primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(30, 110, 245, .42);
}

.w51t-btn.outline {
	background: #fff;
	border-color: var(--w51t-line);
	color: var(--w51t-navy);
}

.w51t-btn.outline:hover:not(:disabled) {
	border-color: var(--w51t-blue);
	color: var(--w51t-blue);
	background: rgba(30, 110, 245, .05);
}

.w51t-btn.ghost {
	background: #fff;
	border-color: var(--w51t-line);
	color: var(--w51t-navy);
	padding: 11px 20px;
	font-size: 14px;
}

.w51t-btn.ghost:hover:not(:disabled) {
	border-color: var(--w51t-navy);
}

.w51t-btn:disabled {
	opacity: .62;
	cursor: progress;
	transform: none !important;
}

.w51t-hint {
	margin: 12px 0 0;
	color: var(--w51t-sub);
	font-size: 13.5px;
	line-height: 1.6;
}

.w51t-hint code {
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 12.5px;
	color: var(--w51t-navy);
}

.w51t-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--w51t-blue);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	border-bottom: 1px dashed rgba(30, 110, 245, .45);
	line-height: 1.9;
}

.w51t-toggle:hover {
	color: var(--w51t-navy);
	border-bottom-color: var(--w51t-navy);
}

.w51t-toggle-mark {
	font-style: normal;
}

.w51t-source {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--w51t-line);
}

.w51t-textarea {
	width: 100%;
	margin: 12px 0 14px;
	padding: 13px 15px;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: var(--w51t-bg);
	color: var(--w51t-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.6;
	resize: vertical;
}

.w51t-textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--w51t-blue);
	box-shadow: 0 0 0 3px rgba(30, 110, 245, .15);
}

/* ---------- Messages ---------- */

.w51t-msg {
	display: none;
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14.5px;
	border: 1px solid transparent;
	line-height: 1.6;
}

.w51t-msg.show {
	display: block;
}

.w51t-msg.info {
	background: rgba(30, 110, 245, .06);
	border-color: rgba(30, 110, 245, .22);
	color: #17417f;
}

.w51t-msg.err {
	background: rgba(220, 38, 38, .06);
	border-color: rgba(220, 38, 38, .25);
	color: #8c1d1d;
}

.w51t-msg code {
	background: rgba(0, 0, 0, .05);
	border-radius: 4px;
	padding: 1px 5px;
}

/* ---------- Report shell ---------- */

.w51t-result {
	display: none;
}

.w51t-result.show {
	display: block;
	animation: w51t-in .35s ease both;
}

@keyframes w51t-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.w51t-report {
	margin-top: 24px;
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-radius: var(--w51t-radius);
	box-shadow: var(--w51t-shadow);
	overflow: hidden;
}

/* ---------- Overview ---------- */

.w51t-overview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--w51t-line);
	border-bottom: 1px solid var(--w51t-line);
}

.w51t-stat {
	background: #fff;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.w51t-stat-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--w51t-sub);
	font-weight: 600;
}

.w51t-stat-value {
	font-size: 16px;
	font-weight: 600;
	color: var(--w51t-navy);
	overflow-wrap: anywhere;
}

.w51t-ok   { color: #067647; }
.w51t-warn { color: #b54708; }
.w51t-dim  { color: var(--w51t-sub); font-weight: 500; }

.w51t-inline-note {
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid var(--w51t-line);
	background: var(--w51t-bg);
	color: var(--w51t-sub);
	font-size: 13.5px;
}

.w51t-inline-note .w51t-ev {
	display: inline-flex;
	margin-top: 6px;
}

/* ---------- Sections ---------- */

.w51t-section {
	padding: 22px 24px;
	border-bottom: 1px solid var(--w51t-line);
}

.w51t-section:last-child {
	border-bottom: 0;
}

.w51t-section-title {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	color: var(--w51t-navy);
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.w51t-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 8px;
	border-radius: 99px;
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--w51t-sub);
}

.w51t-empty {
	margin: 0;
	color: var(--w51t-sub);
	font-size: 14.5px;
}

/* ---------- Themes ---------- */

.w51t-theme {
	border: 1px solid var(--w51t-line);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 12px;
	background: #fff;
}

.w51t-theme:last-child {
	margin-bottom: 0;
}

.w51t-theme.is-current {
	border-color: rgba(30, 110, 245, .38);
	background: linear-gradient(180deg, rgba(30, 110, 245, .05), rgba(30, 110, 245, .015));
}

.w51t-theme-top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 7px;
}

.w51t-theme-name {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--w51t-navy);
}

.w51t-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.w51t-badge.live {
	background: rgba(6, 118, 71, .1);
	color: #067647;
	border: 1px solid rgba(6, 118, 71, .25);
}

.w51t-badge.ghost {
	background: var(--w51t-bg);
	color: var(--w51t-sub);
	border: 1px solid var(--w51t-line);
}

.w51t-theme-meta {
	font-size: 13.5px;
	color: var(--w51t-sub);
	overflow-wrap: anywhere;
}

.w51t-theme-meta code {
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 12.5px;
	color: var(--w51t-navy);
}

.w51t-theme-note {
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--w51t-sub);
}

/* ---------- Evidence chips ---------- */

.w51t-ev {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.w51t-ev-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	color: var(--w51t-sub);
	font-size: 12px;
	line-height: 1.55;
}

/* ---------- Plugin chips ---------- */

.w51t-cat-label {
	margin: 18px 0 9px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--w51t-blue);
}

.w51t-cat-label:first-child {
	margin-top: 0;
}

.w51t-chip {
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: #fff;
	margin-bottom: 8px;
	overflow: hidden;
	transition: border-color .2s ease;
}

.w51t-chip:hover {
	border-color: rgba(30, 110, 245, .35);
}

.w51t-chip > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 15px;
	cursor: pointer;
	list-style: none;
	flex-wrap: wrap;
	transition: background .2s ease;
}

.w51t-chip > summary::-webkit-details-marker {
	display: none;
}

.w51t-chip > summary::after {
	content: "＋";
	margin-left: auto;
	color: var(--w51t-sub);
	font-size: 13px;
	line-height: 1;
}

.w51t-chip[open] > summary::after {
	content: "－";
}

.w51t-chip > summary:hover {
	background: var(--w51t-bg);
}

.w51t-chip > summary b {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--w51t-navy);
}

.w51t-chip-slug {
	font-size: 12.5px;
	color: var(--w51t-sub);
}

.w51t-chip-slug code {
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 12px;
	color: var(--w51t-navy);
}

.w51t-chip-body {
	padding: 0 15px 14px;
	border-top: 1px solid var(--w51t-line);
	background: var(--w51t-bg);
}

.w51t-chip-body-label {
	display: block;
	margin-top: 11px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--w51t-sub);
}

.w51t-chip-body .w51t-ev {
	margin-top: 7px;
}

.w51t-chip-body .w51t-ev-chip {
	background: #fff;
}

/* ---------- Tech signatures ---------- */

.w51t-plug {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}

.w51t-tech {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: #fff;
	min-width: 0;
}

.w51t-tech b {
	font-size: 14px;
	color: var(--w51t-navy);
	overflow-wrap: anywhere;
}

.w51t-tech span {
	font-size: 12px;
	font-weight: 600;
	color: var(--w51t-blue);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.w51t-tech em {
	font-size: 12px;
	font-style: normal;
	color: var(--w51t-sub);
	overflow-wrap: anywhere;
}

/* ---------- Key/value rows ---------- */

.w51t-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--w51t-line);
	font-size: 14px;
	flex-wrap: wrap;
}

.w51t-row:last-of-type {
	border-bottom: 0;
}

.w51t-row span {
	color: var(--w51t-sub);
	flex: 0 0 auto;
}

.w51t-row b {
	color: var(--w51t-navy);
	font-weight: 600;
	text-align: right;
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.w51t-warnline {
	margin: 12px 0 0;
	padding: 11px 14px;
	border-radius: 9px;
	background: rgba(181, 71, 8, .07);
	border: 1px solid rgba(181, 71, 8, .2);
	color: #7a3208;
	font-size: 13.5px;
}

/* ---------- Actions ---------- */

.w51t-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 24px;
	background: var(--w51t-bg);
	border-top: 1px solid var(--w51t-line);
}

.w51t-inline-actions {
	display: flex;
	gap: 16px;
	margin-top: 12px;
}

.w51t-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--w51t-blue);
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.w51t-link:hover {
	border-bottom-color: currentColor;
}

/* ---------- Disclaimer ---------- */

.w51t-disclaimer {
	margin: 18px 0 0;
	color: var(--w51t-sub);
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {

	.w51t-input-row {
		flex-wrap: wrap;
	}

	.w51t-input {
		flex-basis: 100%;
	}

	.w51t-btn {
		flex: 1 1 auto;
	}

	.w51t-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.w51t-section,
	.w51t-actions {
		padding-left: 18px;
		padding-right: 18px;
	}

	.w51t-row {
		flex-direction: column;
		gap: 2px;
	}

	.w51t-row b {
		text-align: left;
	}
}

@media (max-width: 480px) {

	.w51t-overview {
		grid-template-columns: 1fr;
	}

	.w51t-plug {
		grid-template-columns: 1fr;
	}

	.w51t-chip > summary {
		flex-direction: column;
		gap: 4px;
	}
}