* {

box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Inter', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}

header {
background-color: var(--surface-color);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}

nav a {
color: var(--text-color);
text-decoration: none;
margin-left: 1.5rem;
font-weight: 500;
transition: color 0.3s ease;
}

nav a:hover {
color: var(--primary-color);
}

#app {
padding: 2rem 0;
}
 /* Hero Section */
.hero {
text-align: center;
padding: 4rem 1rem;
}

.hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}

.hero p {
font-size: 1.25rem;
color: var(--light-text-color);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.cta-button {
background-color: var(--primary-color);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
}

.cta-button:hover {
background-color: #5b21b6;
}

/* Tools Grid */
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}

.tool-card {
background-color: var(--surface-color);
border-radius: 0.75rem;
padding: 1.5rem;
border: 1px solid var(--border-color);
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px
rgba(0,0,0,0.05);
}
 .tool-card h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}

.tool-card p {
color: var(--light-text-color);
font-size: 0.9rem;
}

/* Individual Tool Page */

.tool-container {
background: var(--surface-color);
padding: 2rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
}

.tool-container h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
}

.tool-container p.intro {
color: var(--light-text-color);
margin-bottom: 2rem;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}

textarea, input[type="text"], input[type="number"], input[type="password"],

input[type="range"] {
width: 100%;
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
font-size: 1rem;
font-family: 'Inter', sans-serif;
}

.btn-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

button, .btn {
background-color: var(--primary-color);
color: white;
padding: 0.6rem 1.2rem;
 border: none;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #5b21b6;
}

button.secondary {
background-color: var(--light-text-color);
}

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

.output-box {
background-color: var(--background-color);
padding: 1rem;
border-radius: 0.5rem;
margin-top: 1rem;
min-height: 50px;
white-space: pre-wrap;
word-wrap: break-word;
}

/* Password Strength */
.strength-meter {
height: 5px;
width: 100%;
background: var(--border-color);
border-radius: 5px;
margin-top: 0.5rem;
}

.strength-bar {
height: 100%;
border-radius: 5px;
transition: width 0.3s ease, background-color 0.3s ease;
}

/* Image Compressor */
input[type="file"] {
padding: 0.5rem;
border: 1px solid var(--border-color);
border-radius: 0.5rem;
width: 100%;
}

/* QR Code */
#qrcode-container {
margin-top: 1rem;
padding: 1rem;
background: white;
display: inline-block;
border: 1px solid var(--border-color);
 }

/* Search Bar */
#tool-search {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
margin-bottom: 2rem;
}

/* Blog */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}

.blog-card {
background-color: var(--surface-color);
border-radius: 0.75rem;
padding: 1.5rem;
border: 1px solid var(--border-color);
text-decoration: none;
color: inherit;
}

.blog-card h3 { color: var(--primary-color); }

.blog-post {
background: var(--surface-color);
padding: 2rem;
border-radius: 0.75rem;
}

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

.blog-post p { margin-bottom: 1rem; }
.blog-post a { color: var(--primary-color); }

/* Contact Form */
#contact-form {
max-width: 600px;
margin: 0 auto;
}

footer {
text-align: center;
padding: 2rem 0;
margin-top: 2rem;
color: var(--light-text-color);
border-top: 1px solid var(--border-color);
}
</style>