/*

Your existing CSS
*/

:root {
--bg:#0B1220;
--panel:#0F172A;
--text:#E2E8F0;
--muted:#94A3B8;
--border:#1E293B;
--accent:#2DD4BF;
--accent-hover:#14B8A6;
--success:#22C55E;
}

html[data-theme="light"] {
--bg:#F8FAFC;
--panel:#FFFFFF;
--text:#0F172A;
--muted:#334155;
--border:#E2E8F0;
--accent:#14B8A6;
--accent-hover:#0D9488;
--success:#16A34A;
}

{
box-sizing: border-box
}

body {
margin: 0;
font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
/* Added a max-width to the body for better readability on large screens */
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}

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

.topbar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: rgba(2,6,23,.7);
backdrop-filter: blur(6px)
}

.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700
}

.logo {
display: block
}

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

.nav a {
transition: color .2s
}

.nav a:hover {
color: var(--accent)
}

.toggle {
width: 28px;
height: 28px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
color: var(--text);
cursor: pointer;
transition: background .2s,border .2s,color .2s
}

.toggle:hover {
background: var(--panel);
border-color: var(--accent)
}

.wrap {
max-width: 1120px;
margin: 0 auto;
padding: 0 20px
}

.hero {
padding: 64px 0
}

.hero h1 {
font-size: 3rem;
line-height: 1;
margin: 0 0 16px
}

.hero .sub {
font-size: 1.5rem;
line-height: 1.5;
color: var(--muted)
}

.tools {
padding: 64px 0
}

.tools h2 {
font-size: 2rem;
margin: 0 0 32px;
text-align: center
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px
}

.card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--panel);
transition: transform .2s,box-shadow .2s,background .2s
}

.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,.2);
background: var(--bg)
}

.card .icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
background: var(--accent);
color: var(--panel);
border-radius: 8px;
font-size: 1.5rem
}

.card h3 {
margin: 0;
font-size: 1.2rem
}

.card p {
margin: 0;
color: var(--muted)
}

.btn-toggle {
display: block;
margin: 24px auto 0;
padding: 12px 24px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--panel);
color: var(--text);
font-weight: 500;
cursor: pointer;
transition: background .2s,border .2s,color .2s
}

.btn-toggle:hover {
background: var(--bg);
border-color: var(--accent);
color: var(--accent)
}

.dropzone, .editor {
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
min-height: 200px;
text-align: center;
color: var(--muted)
}

.footer {
border-top: 1px solid var(--border);
padding: 16px;
color: #9aa7b8
}

.foot-wrap {
max-width: 1120px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px
}

.foot-links {
display: flex;
gap: 16px
}

.foot-links a {
color: #cbd5e1
}

.foot-links a:hover {
color: var(--text)
}

.copy {
color: var(--muted)
}

/* Reusable dropzone */
.dropzone {
position: relative;
display: grid;
place-items: center;
min-height: 160px;
padding: 16px;
border: 1.5px dashed var(--border);
border-radius: 14px;
background: radial-gradient(1200px 200px at 20% -30%, rgba(45,212,191,.08), transparent 70%), #0b1325;
color: var(--text);
text-align: center;
transition: border-color .2s, box-shadow .2s, background .2s;
cursor: pointer;
}

.dropzone:hover {
border-color: var(--accent);
}

.dropzone.is-dragover {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent);
}

/* --- START: UI/UX Improvements for AI Tools Page --- */

/* General Layout and Typography */
.wrap {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

.hero {
text-align: center;
margin-bottom: 40px;
}

.hero h1 {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
}

.sub {
font-size: 1.2rem;
color: #a0a0a0;
}

/* Tool Grid and Cards */
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}

.tool-card {
display: flex;
flex-direction: column;
padding: 25px;
background-color: #1a1a1a;
border: 1px solid #333;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #e0e0e0;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
background-color: #2a2a2a;
}

.tool-icon {
font-size: 3rem;
margin-bottom: 15px;
}

.tool-title {
font-size: 1.5rem;
margin: 0 0 10px 0;
color: #fff;
}

.tool-description {
font-size: 1rem;
line-height: 1.5;
color: #a0a0a0;
}

/* --- END: UI/UX Improvements for AI Tools Page --- */

/* --- START: Blog Post Styling --- */

.blog-post {
max-width: 768px;
margin: 0 auto;
padding: 20px;
background-color: var(--panel);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
border: 1px solid var(--border);
}

.blog-post h1, .blog-post h2, .blog-post h3 {
margin-top: 2rem;
margin-bottom: 1rem;
line-height: 1.2;
}

.blog-post h1 {
font-size: 2.5rem;
}

.blog-post h2 {
font-size: 2rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}

.blog-post p, .blog-post ul, .blog-post li {
font-size: 1.125rem;
line-height: 1.8;
}

.blog-post figure {
margin: 2rem 0;
text-align: center;
}

.blog-post img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.blog-post figcaption {
font-style: italic;
color: var(--muted);
margin-top: 0.5rem;
}

.blog-post a {
color: var(--accent);
text-decoration: underline;
}

/* Mobile-first styling for better readability on small screens */
@media (max-width: 600px) {
.blog-post {
padding: 10px;
}
.blog-post h1 {
font-size: 2rem;
}
.blog-post h2 {
font-size: 1.75rem;
}
.blog-post p, .blog-post ul, .blog-post li {
font-size: 1rem;
}
}

/* A few additional tweaks to improve readability and visual appeal */
.blog-post p strong {
color: var(--accent);
}

.blog-post ul {
list-style: disc;
padding-left: 20px;
}

/* Improve link hover state */
.blog-post a:hover {
text-decoration: none;
border-bottom: 1px solid var(--accent);
}