@charset "utf-8";

:root {
	--tools-bg: #f6f6f2;
	--tools-card: #ffffff;
	--tools-text: #1a1a1a;
	--tools-muted: #6b7280;
	--tools-border: #e5e7eb;
	--tools-accent: #2563eb;
	--tools-ok: #16a34a;
	--tools-minor: #f59e0b;
	--tools-major: #dc2626;
}

body.tools-app {
	margin: 0;
	font-family: "Trebuchet MS", Arial, sans-serif;
	background: var(--tools-bg);
	color: var(--tools-text);
}

body.tools-app .page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

body.tools-app h1,
body.tools-app h2,
body.tools-app h3 {
	color: var(--tools-text);
}

body.tools-app .table {
	width: 100%;
	border-collapse: collapse;
	background: var(--tools-card);
	border: 1px solid var(--tools-border);
	border-radius: 12px;
	overflow: hidden;
}

body.tools-app .table th,
body.tools-app .table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--tools-border);
	text-align: left;
	vertical-align: top;
}

body.tools-app .table th {
	background: #f9fafb;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tools-muted);
}

body.tools-app .tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #eef2ff;
	color: #1e40af;
	font-size: 12px;
	font-weight: 600;
}

body.tools-app .badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}

body.tools-app .badge-ok { background: var(--tools-ok); }
body.tools-app .badge-minor { background: var(--tools-minor); }
body.tools-app .badge-major { background: var(--tools-major); }
body.tools-app .badge-na { background: #6b7280; }

body.tools-app .btn,
body.tools-app .btn-action {
	border: 1px solid var(--tools-border);
	background: #fff;
	color: var(--tools-text);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

body.tools-app .meta {
	color: var(--tools-muted);
	font-size: 12px;
}