.tool-tab{cursor:pointer}
/* small adjustments for homepage only */
#tool-title{margin-bottom:4px}
#tool-desc{margin-bottom:6px;font-size:13px;color:#5b6b78}

/* Theme tokens */
:root{
	--primary:#2563eb; /* blue-600 */
	--primary-contrast:#ffffff;
	--muted:#6b7280;
}

/* Header styles */
header a.group { color: var(--primary); text-decoration: none; }
header a.group .text-lg { color: var(--primary); }
header a.group:hover .text-lg { color: darken(var(--primary), 6%); }
header nav a { color: var(--muted); }
header nav a:hover { color: var(--primary); }

/* Footer styles */
footer p, footer .flex a { color: var(--muted); }
footer .flex a:hover { color: var(--primary); }

/* Category tab hover/focus styles */
.cat-tab{transition:all .18s ease;border:1px solid transparent}
.cat-tab:hover{background-color:#eef2ff;color:#1e3a8a;border-color:#e0e7ff;transform:translateY(-1px)}
.cat-tab:focus{outline:2px solid #c7d2fe}

/* Result placeholder when a result is present */
#tool-output{transition:background-color .18s ease, color .18s ease}
/* default output area */
#tool-output{
	background-color: #f8fafc;
	color: #0f172a;
	border: 1px solid #e6eef8;
	padding: 12px;
	border-radius: 8px;
	min-height:48px;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
}

/* when a result is present use a high-contrast dark theme for visibility */
#tool-output.has-result{
	background-color: #0b1220; /* deep navy */
	color: #f8fafc; /* near-white text */
	box-shadow: 0 10px 30px rgba(2,6,23,0.6);
	border-color: rgba(255,255,255,0.06);
	font-weight: 600;
	padding: 14px;
}

/* ensure code-like results remain readable */
#tool-output.has-result code, #tool-output.has-result pre { color: #e6eef8; }

/* Mobile responsiveness tweaks */
@media (max-width: 640px) {
	/* make category tablist horizontally scrollable with larger tap targets */
	.tablist { -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
	.cat-tab { flex: 0 0 auto; min-width: 120px; margin-right: 8px; white-space: nowrap; padding: 10px 12px; border-radius: 10px; }

	/* stack tool control area for narrow screens */
	.md\:col-span-1, .md\:col-span-2 { grid-column: auto !important; }
	.grid.grid-cols-1 { grid-template-columns: 1fr; }

	/* inputs and buttons full width for easier tapping */
	#tool-select, #tool-convert, #tool-clear { width: 100%; box-sizing: border-box; }
	#tool-convert, #tool-clear { padding: 12px; font-size: 16px; }

	/* improve textarea and result sizing */
	#tool-input { font-size: 15px; min-height: 96px; }
	#tool-output { font-size: 15px; min-height: 64px; }

	/* tools grid stacks to single column */
	#tools-grid { grid-template-columns: 1fr !important; }

	/* header spacing */
	header .mx-auto { padding-left: 12px; padding-right: 12px; }

	/* ensure links are easy to tap */
	#tools-grid a { display: block; padding: 12px; border-radius: 8px; }
}

/* Scrollable tools panel (scrollable, scrollbar hidden for cleaner UI) */
.tools-panel { max-height: 520px; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; }
.tools-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }

.tool-item { list-style: disc; }
.tool-item a { display: inline-block; }