/* ── Reset & Base ── */
		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		:root {
			--primary: #0058bd;
			--primary-container: #2771df;
			--primary-fixed: #d8e2ff;
			--on-primary: #ffffff;
			--on-primary-fixed-variant: #004494;
			--secondary: #0061a4;
			--secondary-fixed: #d1e4ff;
			--on-secondary-fixed: #001d36;
			--surface: #f9f9f9;
			--surface-bright: #f9f9f9;
			--surface-dim: #dadada;
			--surface-container-lowest: #ffffff;
			--surface-container-low: #f3f3f3;
			--surface-container: #eeeeee;
			--surface-container-high: #e8e8e8;
			--surface-container-highest: #e2e2e2;
			--surface-variant: #e2e2e2;
			--on-surface: #1a1c1c;
			--on-surface-variant: #424753;
			--outline: #727785;
			--outline-variant: #c2c6d5;
			--inverse-surface: #2f3131;
			--inverse-on-surface: #f1f1f1;
			--error: #ba1a1a;
			--on-error: #ffffff;
			--error-container: #ffdad6;
			--buycoffee-color: #ffdd00;
			--main-color: #1a73e8;
			--color-dark-grey: #e8e8e8;
			--color-light-grey: #f3f3f3;
		}

		.material-symbols-outlined {
			font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
			vertical-align: middle;
			font-family: 'Material Symbols Outlined';
			font-style: normal;
			line-height: 1;
			display: inline-block;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
		}

		body {
			font-family: 'Inter', sans-serif;
			background-color: var(--surface);
			color: var(--on-surface);
		}

		h1,
		h2,
		h3,
		h4 {
			font-family: 'Manrope', sans-serif;
		}

		a {
			text-decoration: none;
			color: inherit;
		}

		button {
			cursor: pointer;
			font-family: inherit;
		}

		input {
			font-family: inherit;
			outline: none;
		}

		li {
			margin-left: 20px;
			padding: 10px 0 0 0;
		}

		/* ── Layout ── */
		.container {
			max-width: 1536px;
			margin-inline: auto;
		}

		.logo {
			width: 50px;
		}

		.unselectable {
			-webkit-user-select: none;
			/* Safari */
			user-select: none;
			/* Standard (Chrome, Firefox, Edge) */
		}

		/* ── Top Nav ── */
		nav {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 50;
			background: rgba(255, 255, 255, 0.70);
			backdrop-filter: blur(24px);
			-webkit-backdrop-filter: blur(24px);
			box-shadow: 0 16px 32px rgba(0, 88, 189, 0.06);
			margin-top: 0;
		}

		.nav-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem 2rem;
			max-width: 1536px;
			margin-inline: auto;
		}

		.nav-left {
			display: flex;
			align-items: center;
			gap: 0.5rem;

			a {
				text-decoration: none;
			}
		}

		.nav-links {
			display: flex;
			align-items: center;
			gap: 2rem;
		}

		.brand {
			font-size: 1.5rem;
			font-weight: 800;
			letter-spacing: -0.05em;
			color: #0f172a;
			font-family: 'Manrope', sans-serif;
			transition: color .2s;
		}

		.brand:hover {
			color: var(--primary);
		}

		.nav-links a {
			font-size: 0.875rem;
			color: #475569;
			transition: color .2s;
		}

		.nav-links a:hover {
			color: #0f172a;
		}

		.nav-links a.active {
			color: #2563eb;
			font-weight: 600;
			border-bottom: 2px solid #2563eb;
			padding-bottom: 2px;
		}

		.nav-right {
			display: flex;
			align-items: center;
			gap: 1rem;
		}

		.search-bar {
			display: flex;
			align-items: center;
			background: var(--surface-container-low);
			border-radius: 0.75rem;
			padding: 0.5rem 1rem;
			width: 16rem;
			gap: 0.5rem;
		}

		.search-bar input {
			background: transparent;
			border: none;
			font-size: 0.875rem;
			width: 100%;
			color: #475569;
		}

		.search-bar .material-symbols-outlined {
			color: #94a3b8;
			font-size: 1.25rem;
		}

		.icon-btn {
			padding: 0.5rem;
			color: #475569;
			background: transparent;
			border: none;
			border-radius: 0.5rem;
			transition: background .2s, transform .1s;
			line-height: 1;
		}

		.icon-btn:hover {
			background: rgba(100, 116, 139, 0.1);
		}

		.icon-btn:active {
			transform: scale(0.95);
		}

		/* ── Main ── */
		main {
			padding-top: 9rem;
			/* padding-bottom: 5rem; */
			padding-inline: 1.5rem;
			max-width: 1200px;
			margin-inline: auto;
		}

		/* ── Hero ── */
		.hero {
			margin-bottom: 5rem;
			max-width: 1200px;
			width: 100%;

			margin: 0 auto 3rem;

			.hero-subtitle {
				margin: initial;
			}
		}

		.hero h1 {
			font-size: clamp(2.5rem, 6vw, 3.75rem);
			font-weight: 800;
			letter-spacing: -0.04em;
			margin-bottom: 2rem;
			line-height: 1.1;
		}

		.gradient-text {
			background: linear-gradient(135deg, var(--primary), var(--primary-container));
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		/* ── Section Header ── */


		.section-header-wrapper {
			.section-label {
				display: block;
				font-size: 0.6875rem;
				font-weight: 700;
				letter-spacing: 0.1em;
				text-transform: uppercase;
				color: var(--primary);
				margin-bottom: 0.25rem;
			}

			.section-title {
				color: #000;
			}
		}

		.section-title {
			font-size: 1.875rem;
			font-weight: 700;
			letter-spacing: -0.03em;
		}

		.section-header {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin-bottom: 2rem;
		}

		.btn-link {
			background: none;
			border: none;
			color: var(--primary);
			font-weight: 600;
			font-size: 0.875rem;
			cursor: pointer;
			transition: text-decoration .1s;
		}

		.btn-link:hover {
			text-decoration: underline;
		}

		/* ── Favorites ── */
		.favorites {
			margin-bottom: 4rem;
		}

		.fav-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1.5rem;
		}

		.fav-card {
			background: var(--surface-container-lowest);
			padding: 1.5rem;
			border-radius: 0.75rem;
			transition: box-shadow .3s, border-color .3s;
			border: 1px solid transparent;
			position: relative;
		}

		.fav-card:hover {
			box-shadow: 0 16px 32px rgba(0, 88, 189, 0.06);
			border-color: var(--primary-fixed);
		}

		.fav-card-fav-btn {
			position: absolute;
			top: 1rem;
			right: 1rem;
			background: none;
			border: none;
			color: var(--primary);
			line-height: 1;
		}

		.fav-icon {
			width: 3rem;
			height: 3rem;
			background: rgba(0, 88, 189, 0.10);
			border-radius: 0.75rem;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1rem;
			transition: background .2s, color .2s;
		}

		.fav-card:hover .fav-icon {
			background: var(--primary);
			color: white;
		}

		.fav-icon .material-symbols-outlined {
			font-size: 1.5rem;
		}

		.fav-card h3 {
			font-weight: 700;
			font-size: 1.125rem;
			margin-bottom: 0.25rem;
		}

		.fav-card p {
			font-size: 0.875rem;
			color: var(--on-surface-variant);
			line-height: 1.6;
		}

		.fav-empty {
			grid-column: span 2;
			border: 2px dashed rgba(194, 198, 213, 0.4);
			border-radius: 0.75rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 1.5rem;
			color: #94a3b8;
			opacity: 0.6;
			gap: 0.5rem;
		}

		.fav-empty .material-symbols-outlined {
			font-size: 2.5rem;
		}

		.fav-empty p {
			font-size: 0.875rem;
			font-weight: 500;
		}

		button.fav_btn {
			border: 0;
			background-color: #fff;
			cursor: pointer;
		}

		img.fav_btn_image {
			width: 20px;
		}


		/* ── Tools Grid ── */
		.tools-section {
			margin-bottom: 3rem;
		}

		.tools-section.info-section {
			/* margin-bottom: 4rem; */
			max-width: 1200px;
		}

		.cat-header {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			margin-bottom: 1.5rem;
		}

		.cat-header .material-symbols-outlined {
			color: var(--primary);
		}

		.cat-header h3 {
			font-size: 1.25rem;
			font-weight: 700;
		}

		/* ── Tool Card ── */
		.tool-grid-4 {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;
		}

		.tool-grid-3 {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;
		}

		.tool-grid-2 {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
		}

		.tool-grid-1 li {
			margin-bottom: 1rem;
		}

		.tool-grid-5 {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 1rem;
		}

		.tool-card {
			background: white;
			padding: 1rem;
			border-radius: 0.75rem;
			border: 1px solid rgba(194, 198, 213, 0.15);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: box-shadow .2s;
			min-height: 117px;
			cursor: pointer;
		}

		.tools-section .tool-card {
			min-height: auto;
		}

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

		.tool-card a {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tool-card-left {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			flex: 1;
		}

		.tool-card-left span:first-child {
			font-size: 1.25rem;
		}

		.tool-card-name {
			font-weight: 500;
			font-size: 0.875rem;
		}

		.tool-card-name.xs {
			font-size: 0.75rem;
		}

		.star-btn {
			background: none;
			border: none;
			line-height: 1;
			padding: 0;
			margin-left: 0.5rem;
		}

		.star-btn .material-symbols-outlined {
			color: #cbd5e1;
			font-size: 1.25rem;
			transition: color .2s;
		}

		.tool-card:hover .star-btn .material-symbols-outlined {
			color: var(--primary);
		}

		.star-btn.active .material-symbols-outlined {
			color: var(--primary);
			font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
		}

		/* ── Two-col layout ── */
		.split-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 3rem;
			/* margin-bottom: 3rem; */
		}

		/* ── Social Media larger cards ── */
		.social-list {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}

		.tool-card-lg {
			background: white;
			padding: 1.25rem;
			border-radius: 0.75rem;
			border: 1px solid rgba(194, 198, 213, 0.15);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: box-shadow .2s;
		}

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

		.tool-card-lg a {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tool-card-lg-left {
			display: flex;
			align-items: center;
			gap: 1rem;
		}

		.tool-card-lg-left span:first-child {
			font-size: 1.5rem;
		}

		.tool-card-lg .name {
			font-weight: 600;
			color: #1e293b;
		}

		/* ── Security / Calculations panels ── */
		.panel-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 2rem;
			margin-bottom: 3rem;
		}

		.panel {
			padding: 2rem;
			border-radius: 1rem;
		}

		.panel-grey {
			background: var(--surface-container-low);
		}

		.panel-blue {
			background: var(--secondary-fixed);
			color: var(--on-secondary-fixed);
		}

		.panel-card {
			background: white;
			padding: 1.25rem;
			border-radius: 0.75rem;
			border: 1px solid rgba(194, 198, 213, 0.12);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: box-shadow .2s;
		}

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

		.panel-blue .panel-card {
			background: rgba(255, 255, 255, 0.90);
		}

		.panel-card a {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.panel-card-left {
			display: flex;
			align-items: center;
			gap: 1rem;
		}

		.panel-card-left span:first-child {
			font-size: 1.5rem;
		}

		.panel-card .name {
			font-weight: 700;
			color: #1e293b;
		}

		/* ── Footer ── */
		footer {
			padding: 3rem 2rem;
			margin-top: 3rem;
			background: #f8fafc;
			border-top: 1px solid rgba(203, 213, 225, 0.5);
		}

		.footer-inner {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: 1.5rem;
			max-width: 1536px;
			margin-inline: auto;
		}

		.footer-brand {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		.footer-brand strong {
			font-family: 'Manrope', sans-serif;
			font-weight: 700;
			color: #0f172a;
			font-size: 1.125rem;
		}

		.footer-brand p {
			font-size: 0.875rem;
			color: #64748b;
			letter-spacing: 0.02em;
		}

		.footer-links {
			display: flex;
			gap: 2rem;
		}

		.footer-links a {
			color: #64748b;
			font-size: 0.875rem;
			letter-spacing: 0.02em;
			transition: color .2s;
		}

		.footer-links a:hover {
			color: #0f172a;
		}

		.fav-tool {
			list-style: none;
		}


		.buy-coffee-btn {
			background-color: var(--buycoffee-color);
			border-radius: 5px;
			padding: 9px;
			animation: 0.2s cupButtonOff ease;
			margin-top: -8px;

			#cup {
				animation: 0.2s cupMotionOrg ease;
				transform: translateY(0px) rotate(0deg);
			}
		}

		.buy-coffee-btn:hover {
			text-decoration: none !important;
			background-color: var(--main-color);
			color: #ffffff !important;
			animation: 0.2s cupButtonOn ease;

			#cup {
				animation: 0.5s cupMotion ease;
				transform: translateY(10px) rotate(20deg);
			}
		}

		@keyframes cupButtonOn {
			from {
				background-color: var(--buycoffee-color);
				color: #333;
			}

			to {
				background-color: var(--main-color);
				color: #ffffff;
			}
		}

		@keyframes cupButtonOff {
			from {
				background-color: var(--main-color);
				color: #ffffff;
			}

			to {
				background-color: var(--buycoffee-color);
				color: #333;
			}
		}

		@keyframes cupMotionOrg {
			from {
				transform: translateY(10px) rotate(20deg);
			}

			to {
				transform: translateY(0) rotate(0deg);
			}
		}

		@keyframes cupMotion {
			from {
				transform: translateY(0) rotate(0deg);
			}

			to {
				transform: translateY(10px) rotate(20deg);
			}
		}



		/* ── Responsive ── */
		@media (max-width: 1024px) {
			.tool-grid-4 {
				grid-template-columns: repeat(2, 1fr);
			}

			.tool-grid-5 {
				grid-template-columns: repeat(3, 1fr);
			}

			.split-grid {
				grid-template-columns: 1fr;
				gap: 2rem;
			}

			.panel-grid {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 768px) {

			.nav-links,
			.search-bar {
				display: none;
			}

			.nav-inner {
				padding: 1rem;
			}

			.tool-grid-3,
			.tool-grid-4,
			.tool-grid-5 {
				grid-template-columns: 1fr;
			}

			.tool-grid-2 {
				grid-template-columns: 1fr;
			}

			.footer-inner {
				flex-direction: column;
				align-items: flex-start;
			}

			.footer-links {
				flex-wrap: wrap;
				gap: 1rem;
			}
		}

		/* ── Form Styles ── */
		.upload-area {
			border: 3px dashed rgb(0 88 189 / 0.4);
			border-radius: 15px;
			padding: 40px;
			text-align: center;
			margin-bottom: 25px;
			transition: all 0.3s ease;
			cursor: pointer;
		}

		.upload-area:hover {
			background: #f8f9ff;
			border-color: var(--primary);

			.upload-icon {
				transform: scale(1.1);
			}
		}

		.upload-icon {
			font-size: 48px;
			color: var(--primary);
			margin-bottom: 15px;
			background-color: var(--color-dark-grey);
			border-radius: 50%;
			padding: 15px;
			transition: all 0.2s ease;
		}

		input[type="file"] {
			display: none;
		}

		.file-label {
			color: var(--primary);
			font-weight: 600;
			cursor: pointer;
		}

		.format-selector {
			margin-bottom: 25px;
		}

		.format-selector label {
			display: block;
			color: #333;
			font-weight: 600;
			margin-bottom: 10px;
		}

		.format-buttons {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			gap: 10px;
		}

		.format-btn {
			padding: 12px;
			border: 2px solid #e0e0e0;
			border-radius: 10px;
			background: white;
			cursor: pointer;
			transition: all 0.3s ease;
			font-weight: 600;
			color: #666;
		}

		.format-btn:hover {
			border-color: var(--primary);
			color: var(--primary);
		}

		.format-btn.active {
			background: var(--primary);
			border-color: var(--primary);
			color: white;
		}

		.submit-btn {
			width: 100%;
			padding: 15px;
			color: white;
			border: none;
			border-radius: 10px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			background: linear-gradient(45deg, var(--primary) 0%, #2a3770 100%);
			background-size: 200% 200%;
			background-position: left top;
			transition: background-position 0.6s ease;
		}

		.submit-btn:hover {
			background-position: right bottom;
			text-decoration: none;
		}

		.submit-btn:disabled {
			opacity: 0.6;
			cursor: not-allowed;
			transform: none;
		}

		.message {
			padding: 15px;
			border-radius: 10px;
			margin-bottom: 20px;
			text-align: center;
		}

		.success {
			background: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
		}

		.error {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
		}

		.error code {
			background: #fff;
			padding: 2px 6px;
			border-radius: 4px;
			font-family: monospace;
			color: #d63384;
		}

		.error strong {
			display: block;
			margin: 5px 0;
		}

		.result {
			margin-top: 25px;
			padding: 20px;
			background: #f8f9ff;
			border-radius: 10px;
			text-align: center;
		}

		.result img {
			max-width: 100%;
			border-radius: 10px;
			margin: 15px 0;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.download-btn {
			display: inline-block;
			padding: 12px 30px;
			background: #28a745;
			color: white;
			text-decoration: none;
			border-radius: 8px;
			font-weight: 600;
			transition: transform 0.2s ease;
		}

		.download-btn:hover {
			transform: translateY(-2px);
		}

		.file-name {
			color: #666;
			font-size: 14px;
			margin-top: 10px;
		}

		p.note {
			margin: 0 0 20px 0;
			text-align: center;
		}

		.info-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 2rem;
			margin-top: 2rem;
			/* max-width: 1200px; */
			margin-inline: auto;
		}

		.info-grid h2 {
			font-size: 1.3rem;
			color: var(--on-surface);
			margin-bottom: 1rem;
		}

		.info-grid p,
		.info-grid ul {
			line-height: 1.6;
			color: var(--on-surface-variant);
		}

		.info-grid ul {
			list-style: disc;
			padding-left: 1.5rem;
		}

		.hero-subtitle {
			font-size: 1.2rem;
			color: var(--on-surface-variant);
			max-width: 900px;
			margin: 0 auto;
		}

		.converter-form {
			display: flex;
			flex-direction: column;
			align-items: center;
			max-width: 1200px;
			margin-inline: auto;
			width: 100%;
			margin-bottom: 3rem;
		}

		.converter-form form {
			width: 100%;
		}

		.category-block {
			margin-bottom: 3rem;
		}