:root {
	/* Background colors */
	--bg-body: #f6f8fa; 
	--bg-card: #fff;
    --bg-tool-link: #fff;
	--bg-header: transparent;
	--bg-result: #fafafa;
	--bg-pre-output: #272822;

	/* Text colors */
	--text-primary: #000000;
	--text-secondary: #555555;
	--text-footer: #777777;
	--text-footer-link: #555555;
	--text-footer-link-hover: #000000;
	--text-header: black;
	--text-banner-logo: #534f4f;
	--text-email-link: #1a73e8;
	--text-legend: #000;
    --text-tool-link: #7a7373;
	--text-header: #000;
    --text-homepage-goal: #272625;
    
	/* Borders */
	--border-input: #e6e9ee;
	/*--border-tool-link: #f1f3f5;*/
    --border-tool-link: #f6f6f6;
	--border-color-swatch: #ddd;
	--border-result: #e6e9ee;
	--border-color-preview: #ccc;
}

html.dark-mode {
	/* Background colors */
	--bg-body: #121212;
	/*--bg-card: #1E1E1E;*/
    --bg-card: #1a1b1b;
	--bg-tool-link: #2b2b2b;
	--bg-header: #1E1E1E;
	--bg-result: #1E1E1E;
	--bg-pre-output: #272822; /* keep same, it’s already dark */

	/* Text colors */
	--text-primary: #E0E0E0;
	--text-secondary: #A0A0A0;
	--text-footer: #A0A0A0;
	--text-footer-link: #a7a7a7;
	--text-footer-link-hover: #66B2FF;
	--text-header: #7f8587;
	--text-banner-logo: #BBBBBB;
	--text-email-link: #3399FF;
	--text-legend: #E0E0E0;
	--text-tool-link: #E0E0E0;
    --text-homepage-goal: var(--text-primary);
    
	/* Borders */
	/*--border-input: #333333;*/
    --border-input: #27292b;
	--border-tool-link: #232425;
	--border-color-swatch: #444444;
	--border-result: #444444;
	--border-color-preview: #555555;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box !important;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
	-webkit-touch-callout: none;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-smooth: always;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: 100vh;
	background: var(--bg-body);
	margin: 0;
	padding: 0 0 40px; /* bottom padding for footer */
}

.header, .header a {
	color: var(--text-header);
	text-decoration: none;
}

.header_sub_container {
    width: 800px;
    padding: 12px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.header_sub_container:hover{
    cursor:pointer;
}

#header {
	position: relative;
	width: 100%;
	top: 0;
	background: var(--bg-header);
	padding: 9px 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

#header a {
	text-decoration: none;
	/* Add color here if needed */
}

.header_content {
	width: auto;
	min-width: 700px;
	max-width: 700px;
	text-align: center;
}

.header_content h1 {
	text-align: left;
}

#banner_logo {
	color: var(--text-banner-logo);
	display: flex;
	flex-direction: column;
}

#site_name {
	font-weight: 700;
	font-size: 24px;
}

/* === Content container === */
#content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.alpha_container {
	display: flex;
	flex-direction: row;
	gap: 36px;
	justify-content: center;
	align-items: center;
	max-width: 1520px;
	padding: 20px;
}

.misc_container {
	/* no colors here */
}

#homepage_sitename {
	font-weight: 700;
	font-size: 64px;
}

.homepage_site_description {
	font-size: 27px;
}

.homepage_goal {
    color:var(--text-homepage-goal);
	font-weight: 600;
	font-size: 35px;
	margin-top: 30px;
    margin-top: 39px;
}

.hideable {
	position: relative;
	display: inline-block;
}

.hide {
	display: none;
}

.show {
	display: block;
}

/* === Card style common to all tools/pages === */
.card {
    color: var(--text-secondary);
	background: var(--bg-card);
	padding: 22px 24px;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
	width: auto;
	max-width: 780px;
	text-align: center;
	margin-bottom: 24px;
	box-sizing: border-box;
}

.card.narrow {
	max-width: 360px;
}

.card.medium {
	max-width: 480px;
}

.card.small {
	max-width: 300px;
}
.homepage_toolkit{
    padding:22px 0px;
    max-height: 78vh;
    overflow: hidden;
}
.homepage_toolkit:hover{
    overflow:auto;
}
.legend {
    color: var(--text-legend);
	max-width: 520px;
}
.container {
    background: var(--bg-tool-link);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    text-align: center;
}
/* === Headings === */
h1 {
	font-size: 22px;
	margin-bottom: 12px;
	text-align: center;
	font-weight: 700;
	color: var(--text-primary);
}

h1.large {
	font-size: 28px;
	margin-bottom: 15px;
}

/* === Paragraph and text === */
p, ul {
	font-size: 16px;
	color: var(--text-secondary);
	margin-bottom: 12px;
	line-height: 1.5;
}

ul {
	padding-left: 20px;
}

/* === Links in footer and email === */
footer {
	width: 100%;
	max-width: 720px;
	text-align: center;
	font-size: 14px;
	color: var(--text-footer);
	user-select: none;
	margin-top: 12px;
}

footer a {
	color: var(--text-footer-link);
	text-decoration: none;
	margin: 0 12px;
	transition: color 0.2s ease;
}

footer a:hover {
	color: var(--text-footer-link-hover);
	text-decoration: underline;
}

a.email-link {
	display: inline-block;
	margin-top: 16px;
	font-size: 16px;
	color: var(--text-email-link);
	text-decoration: none;
	word-break: break-all;
}

a.email-link:hover {
	text-decoration: underline;
}

/* === Buttons common style === */
button {
	background-color: var(--text-email-link);
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

button:hover {
	background-color: #155ab6; /* Optional variable */
}

/* Secondary button style */
button.secondary {
	background: #f3f4f6;
	color: #111;
	border: 1px solid var(--border-input);
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

button.secondary:hover {
	background-color: #e0e3e7;
}

/* === Inputs and textareas === */
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
	width: 100%;
	padding: 12px;
	font-size: 16px;
	border: 1px solid var(--border-input);
	border-radius: 6px;
	box-sizing: border-box;
	margin-bottom: 12px;
	font-family: system-ui, sans-serif;
	resize: vertical;
	text-align: left;
    background: var(--bg-body);
    color: var(--text-primary);
}

textarea {
	min-height: 250px;
}

input[type="text"],
input[type="password"],
input[type="number"] {
	text-align: center;
}

/* For monospace input/textarea */
textarea.mono,
pre {
	font-family: monospace, monospace;
}

/* Specific textarea heights */
textarea.small {
	min-height: 100px;
}

textarea.medium {
	min-height: 140px;
}

textarea.large {
	min-height: 180px;
}

textarea.xlarge {
	min-height: 200px;
}

textarea.xxlarge {
	min-height: 240px;
}

/* === Specific layout helpers === */
.tool-links {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.tool-link {
	/*display: inline-block;*/
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 17px 24px;
	background: var(--bg-tool-link);
	border: 1px solid var(--border-tool-link);
	border-radius: 12px;
	text-decoration: none;
	color: #474747; /* Could add variable if desired */
    color: var(--text-tool-link);
	font-size: 16px;
	font-weight: 500;
	transition: box-shadow 0.2s ease;
	width: 230px;
}

.tool-link:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Flex columns for superscript generator */
.cols {
	display: flex;
	gap: 12px;
}

.col {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Buttons container for calculator */
.buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

/* Calculator input override for text alignment */
input.calc-input {
	text-align: right;
}

/* Palette */
.palette {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.color-swatch {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	cursor: pointer;
	position: relative;
	border: 1px solid var(--border-color-swatch);
	user-select: none;
}

/* Color code */
.color-code {
    color:var(--text-secondary);
	margin-top: 6px;
	font-family: monospace;
	font-size: 14px;
	user-select: text;
	text-align: center;
}

/* Swatch container */
.swatch-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
}

/* Error text */
.error {
	color: #dc3545; /* Could define error color variable if desired */
	font-weight: 600;
	margin-bottom: 12px;
	min-height: 18px;
}

/* Input groups */
.input-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin-bottom: 12px;
}

/* Password strength bar */
.strength-bar {
	height: 10px;
	border-radius: 6px;
	background: #eee;
	margin-bottom: 12px;
	overflow: hidden;
}

.strength-bar > div {
	height: 100%;
	width: 0%;
	transition: width 0.3s ease;
	border-radius: 6px;
}

.strength-weak {
	background-color: #dc3545;
}

.strength-medium {
	background-color: #ffc107;
}

.strength-strong {
	background-color: #28a745;
}

/* Strength text */
#strengthText {
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--text-secondary);
	margin-bottom: 15px;
}

/* Output containers */
.output {
	margin-top: 20px;
	font-size: 20px;
	font-weight: 600;
	color: var(--text-primary); /* Could add variable if desired */
	min-height: 40px;
	user-select: text;
	text-align: left;
}

pre.output {
	background: var(--bg-pre-output);
	color: #f8f8f2;
	padding: 16px;
	border-radius: 8px;
	font-family: monospace, monospace;
	white-space: pre-wrap;
	overflow-x: auto;
	min-height: 60px;
}

/* Text diff compare tool */
.inputs {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

textarea.diff {
	width: 50%;
	height: 140px;
	padding: 12px;
	font-size: 16px;
	border: 1px solid var(--border-input);
	border-radius: 6px;
	box-sizing: border-box;
	resize: vertical;
	font-family: monospace;
	white-space: pre-wrap;
}

.buttons-row,
.buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

#result, .result {
	text-align: left;
	border: 1px solid var(--border-result);
	border-radius: 6px;
	padding: 12px;
	background: var(--bg-result);
    color:var(--text-primary);
	font-family: monospace;
	font-size: 16px;
	white-space: pre-wrap;
	min-height: 100px;
}

.added {
	background-color: #d4fcbc;
}

.removed {
	background-color: #ffc6c6;
	text-decoration: line-through;
}

/* Unit converter rows */
.row {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

input[type="number"],
select {
	padding: 10px;
	font-size: 16px;
    background: var(--bg-body);
    color: var(--text-primary);
	border: 1px solid var(--border-input);
	border-radius: 6px;
	width: 100%;
	max-width: 160px;
	box-sizing: border-box;
	cursor: pointer;
	max-height: 43px;
	margin: 0 0 12px;
}

/* Calculator buttons */
button.calc-btn {
	padding: 14px;
	font-size: 16px;
	border: none;
	border-radius: 6px;
	background: #007bff;
	color: #fff;
	cursor: pointer;
}

button.calc-btn:hover {
	background: #0069d9;
}

/* Specific smaller cards for calculators */
.card.calc {
	max-width: 300px;
	text-align: center;
}

.card.calc-medium {
	max-width: 360px;
}

.card.calc-large {
	max-width: 480px;
}

/* Misc small spacing overrides */
.meta {
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 8px;
}

.small {
	font-size: 13px;
	color: var(--text-secondary);
}

/* Label styling */
label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 16px;
	text-align: left;
	cursor: pointer;
	color: var(--text-primary);
}

/* Controls container (superscript generator) */
.controls {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Columns for superscript generator */
.cols {
	display: flex;
	gap: 12px;
}

.col {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Color picker input */
input[type="color"] {
	width: 60px;
	height: 40px;
	border: none;
	padding: 0;
	margin-bottom: 12px;
	cursor: pointer;
	vertical-align: middle;
	border-radius: 6px;
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

/* Color preview box */
#colorPreview {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border-radius: 8px;
	border: 1px solid var(--border-color-preview);
	background: transparent;
}

/* Error message */
.error {
	color: #dc3545;
	font-weight: 600;
	margin-bottom: 12px;
	min-height: 18px;
}

/* Misc spacing for buttons group */
.buttons-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 12px;
}
.counter{
        color: var(--text-secondary);font-weight:700;margin-bottom:8px
      }
@media (max-width: 575.98px) {
	body {
		/* No background color override */
	}
	.header_content {
		min-width: unset;
		max-width: unset;
	}
	.header_sub_container {
		width: auto;
		padding: 12px 0px;
	}
    .header, .header a {
        width: 100%;
        padding: 0px 10px;
    }
	.alpha_container {
		flex-direction: column;
		padding: 0;
	}
	.tool-link {
		width: auto;
		padding: 14px 20px;
	}
	.legend {
		padding: 20px;
	}
    .homepage_toolkit{
        padding:22px 24px;
        max-height:unset;
        overflow:unset;
    }
}