@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
	--bg: #fafafa;
	--bg-gradient: linear-gradient(135deg, #e5e9ec, #fafafa);
	--card-bg: #ffffff;
	--text: #2d3436;
	--subtext: #636e72;
	--input-bg: #ffffff;
	--results-bg: #f3f4f6;
	--safety-bg: #f5f6f5;
	--border: #dfe6e9;
	--primary: #1e88e5;
	--primary-hover: #1565c0;
	--secondary: #00cc66;
	--secondary-hover: #00b359;
	--success: #26a69a;
	--error: #e63946;
	--shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	--trust-count: #3b82f6;
}

body.dark-mode {
	--bg: #2d3436;
	--bg-gradient: linear-gradient(135deg, #3b4447, #2d3436);
	--card-bg: #3b4447;
	--text: #dfe6e9;
	--subtext: #95a5a6;
	--input-bg: #4b5457;
	--results-bg: #4b5457;
	--safety-bg: #434b4e;
	--border: #596366;
	--primary: #42a5f5;
	--primary-hover: #1e88e5;
	--secondary: #80cbc4; /* Softer teal, less contrast */
    --secondary-hover: #4db6ac; /* Slightly darker for hover */
	--success: #4db6ac;
	--error: #ff6b6b;
	--shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	--trust-count: #60a5fa;
}

body {
	font-family: 'Poppins', sans-serif;
	background: var(--bg-gradient);
	margin: 0;
	padding: 32px;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.card {
	background: var(--card-bg);
	border-radius: 16px;
	padding: 32px;
	max-width: 720px;
	width: 100%;
	box-shadow: var(--shadow);
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 16px;
}

h1 {
	color: var(--text);
	margin: 0;
	font-size: clamp(32px, 5vw, 44px); /* Adjusted */
	font-weight: 700;
}

.logo-text {
	font-weight: 500;
}
.highlight {
	color: var(--primary);
	font-weight: 700;
}
h2 {
	color: var(--text);
	font-size: clamp(22px, 3vw, 26px); /* Adjusted */
	font-weight: 600;
	margin: 0 0 12px;
}
p {
	color: var(--subtext);
	font-size: 18px; /* Adjusted */
	line-height: 1.6;
	margin: 0 0 16px;
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

.header-nav a {
	color: var(--primary);
	text-decoration: none;
	font-size: 18px; /* Adjusted */
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 8px;
	transition: background 0.3s;
}

.header-nav a:hover {
	background: var(--border);
}

.theme-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--subtext);
	font-size: 16px; /* Adjusted */
}

.theme-switch input {
	appearance: none;
	width: 40px;
	height: 20px;
	background: var(--border);
	border-radius: 20px;
	position: relative;
	cursor: pointer;
	transition: background 0.3s;
}

.theme-switch input::before {
	content: '';
	width: 16px;
	height: 16px;
	background: var(--primary);
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: transform 0.2s ease;
}

.theme-switch input:checked::before {
	transform: translateX(20px);
}
.theme-switch input:checked {
	background: var(--secondary);
}

.safety-assurance {
	text-align: center;
	margin-bottom: 24px;
	background: var(--safety-bg);
	padding: 12px 24px;
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.trust-badge {
	color: var(--success);
	font-size: 16px; /* Adjusted */
	margin: 0;
}
.trust-count {
	color: var(--trust-count);
}
.fear-hint {
	color: #999;
	font-size: 16px; /* Adjusted */
	text-align: center;
	margin: 8px 0 16px;
}
body.dark-mode .fear-hint {
	color: #b3b3b3;
}

.input-label {
	color: var(--text);
	font-size: 18px; /* Adjusted */
	margin-bottom: 12px;
	font-weight: 500;
	text-align: left;
}
.input-wrapper {
	margin-bottom: 0;
	max-width: 100%;
}

textarea {
	width: 100%;
	height: 100px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	font-size: 18px; /* Adjusted */
	resize: vertical;
	background: var(--input-bg);
	color: var(--text);
	font-family: 'Courier New', monospace;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: border-color 0.3s;
	box-sizing: border-box;
}

textarea:focus {
	border-color: var(--primary);
	outline: none;
}

.button-group {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 24px 0;
	flex-wrap: wrap;
}

button {
	background: var(--secondary);
	color: #fff;
	border: none;
	padding: 12px 28px;
	border-radius: 12px;
	font-size: 18px; /* Adjusted */
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s, transform 0.2s;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

button:hover {
	background: var(--secondary-hover);
	transform: translateY(-2px);
}
button.clear-btn {
	background: var(--error);
}
button.clear-btn:hover {
	background: #d32f2f;
}

.results-card {
	background: var(--results-bg);
	padding: 16px;
	border-radius: 12px;
	min-height: 100px;
	position: relative;
	box-shadow: var(--shadow);
	margin-bottom: 32px;
}

.loader {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: var(--results-bg);
	border-radius: 12px;
	color: var(--subtext);
	z-index: 1;
}

.progress-bar {
	width: 40%;
	height: 6px;
	background: var(--border);
	border-radius: 3px;
	margin-bottom: 12px;
}

.progress {
	width: 0;
	height: 100%;
	background: var(--primary);
	transition: width 0.3s ease;
}

.placeholder {
	color: var(--subtext);
	text-align: center;
	font-style: italic;
	font-size: 16px; /* Adjusted */
}
.placeholder.hidden {
	display: none;
}
.tab-pane {
	font-family: 'Courier New', monospace;
	font-size: 18px; /* Adjusted */
	text-align: center;
}
.tab-pane p {
	font-weight: 600;
}

.hint-label {
	text-align: center;
	color: var(--subtext);
	font-size: 16px; /* Adjusted */
	margin-top: 12px;
}

.metrics-list {
	max-width: 350px;
	margin: 12px auto;
	padding: 0;
	list-style: none;
}

.metrics-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	color: var(--text);
	font-size: 18px; /* Adjusted */
}

.metric-icon {
	color: var(--primary);
	font-size: 18px; /* Adjusted */
}

.site-footer {
    text-align: center;
    color: var(--subtext);
    font-size: 16px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertical alignment */
    flex-wrap: wrap;
    gap: 12px; /* Reduced gap for tighter spacing */
    margin: 0; /* Remove any default margins */
}

.footer-content p {
    margin: 0; /* Remove default margin on p */
    line-height: 1; /* Normalize line height */
}

.footer-nav {
    display: flex;
    gap: 12px;
    margin: 0; /* Remove default margin */
    line-height: 1; /* Normalize line height */
}

.footer-nav a, .site-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.footer-nav a:hover, .site-footer a:hover {
    color: var(--primary-hover);
}

@media (max-width: 600px) {
	body {
		padding: 12px;
	}
	.card {
		padding: 20px;
	}
	header {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
	.button-group {
		flex-direction: column;
		gap: 8px;
	}
	button {
		width: 100%;
		padding: 10px;
	}
	.input-wrapper {
		margin-bottom: 0;
	}
	textarea {
		width: 100%;
		height: 80px;
	}
	.footer-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .footer-nav {
        justify-content: center;
    }
	.metrics-list {
		max-width: 100%;
	}
	.fear-hint,
	.trust-badge {
		font-size: 15px;
	} /* Adjusted minimum */
}