:root {
  --primary: #007bff; /* Brighter Blue for branding */
  --primary-hover: #0056b3;
  --secondary: #f8f9fa; /* Very Light Background */
  --text: #343a40; /* Darker text for readability */
  --tool-bg: #ffffff;
  --shadow-light: 0 4px 15px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 20px rgba(0,0,0,0.15);
}
body{font-family:'Poppins',sans-serif;margin:0;background:var(--secondary);color:var(--text);line-height:1.6;}
.container{max-width:1200px;margin:auto;padding:20px;}
header{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.05);padding:15px 20px;position:sticky;top:0;z-index:999;display:flex;justify-content:space-between;align-items:center;}
header .container { display: flex; justify-content: space-between; align-items: center; padding: 0; }
.logo{font-weight:700;text-decoration:none;color:var(--primary);font-size:24px;}
nav a{margin-left:20px;text-decoration:none;color:var(--text);font-weight:500;transition:color 0.3s;}
nav a:hover{color:var(--primary);}
.breadcrumb{margin:15px 0 25px 0;color:#6c757d;font-size:14px;}
.tool-box{background:var(--tool-bg);padding:30px;border-radius:15px;box-shadow:var(--shadow-light);text-align:center;}
.tool-icon{width:90px;height:90px;margin-bottom:20px;background:var(--primary);padding:10px;border-radius:10px;}
.tool-box h1 { color: var(--primary-hover); font-size: 2.2em; margin-bottom: 10px; }
.description{max-width:750px;margin:15px auto 25px auto;color:#5a6268;font-size:1.1em;}
button{background:var(--primary);color:#fff;border:none;padding:12px 25px;margin:10px 5px;border-radius:8px;cursor:pointer;font-weight:600;transition:background 0.3s, transform 0.1s;}
button:hover{background:var(--primary-hover);transform:translateY(-1px);}

/* Editor Specific Styles (Upgraded) */
.editor-container {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-top: 30px;
}
.toolbar {
    background: #e9ecef; 
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #dee2e6;
    justify-content: flex-start;
}
.toolbar button, .toolbar select, .toolbar input[type="color"] {
    background: var(--tool-bg);
    color: var(--primary);
    padding: 8px 12px;
    margin: 0;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 38px; /* Standardize height */
    box-sizing: border-box;
}
.toolbar button:hover, .toolbar select:hover, .toolbar input[type="color"]:hover {
    background: #e2e6ea;
    border-color: #b8c1cb;
}
.toolbar input[type="color"] {
    width: 40px;
    padding: 0;
    overflow: hidden;
}
.toolbar select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23007bff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    padding-right: 25px;
}

#editorContent {
    min-height: 450px;
    padding: 25px;
    text-align: left;
    outline: none;
    font-size: 17px;
    line-height: 1.75;
    font-family: 'Georgia', serif; 
    color: var(--text);
}
#editorContent:empty:before {
    content: attr(placeholder);
    color: #adb5bd;
    display: block;
    font-style: italic;
}

.utility-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}
/* Custom Utility Button Colors */
#loadDraftBtn { background: #28a745; } /* Green */
#saveDraftBtn { background: #ffc107; color: #333; } /* Yellow */
#downloadTxtBtn { background: #17a2b8; } /* Teal */
#downloadHtmlBtn { background: var(--primary); }
#clearBtn { background: #dc3545; } /* Red */
#loadDraftBtn:hover { background: #1e7e34; }
#saveDraftBtn:hover { background: #e0a800; }
#downloadTxtBtn:hover { background: #138496; }
#clearBtn:hover { background: #c82333; }


/* Related Tools and FAQ styles */
section{margin-top:40px;}
section h2 { color: var(--primary); border-bottom: 2px solid #dee2e6; padding-bottom: 10px; margin-bottom: 20px; }
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin-top:15px;}
.card{background:var(--tool-bg);padding:20px;border-radius:12px;box-shadow:var(--shadow-light);text-align:center;transition:transform 0.3s, box-shadow 0.3s;}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);}
.card img{width:60px;height:60px;margin-bottom:15px;}
.card h3{color:var(--text);font-size:1.4em;}
.card p{font-size:0.95em;color:#6c757d;}
.card a button{margin-top:15px;}

.faq-item{background:var(--tool-bg);padding:20px;border-radius:10px;margin-bottom:15px;box-shadow:0 1px 5px rgba(0,0,0,0.05);}
.faq-item h3{color:var(--primary-hover);margin-top:0;font-size:1.15em;}
footer{text-align:center;padding:25px;background:#fff;margin-top:50px;box-shadow:0 -2px 8px rgba(0,0,0,0.05);}
#backToTop{position:fixed;bottom:25px;right:25px;background:var(--primary);color:#fff;border:none;border-radius:50%;padding:12px;width:45px;height:45px;font-size:1.2em;cursor:pointer;display:none;box-shadow:0 3px 10px rgba(0,0,0,0.2);z-index:1000;}

/* Responsive Adjustments */
@media(max-width:768px){
  .toolbar { justify-content: center; }
  .utility-buttons { gap: 10px; }
  .utility-buttons button { padding: 10px 15px; font-size: 0.9em; }
  nav a { margin-left: 10px; font-size: 0.9em; }
}
@media(max-width:480px){
    .logo { font-size: 20px; }
    header nav { display: none; } /* Hide nav on very small screens for better space */
    .tool-box h1 { font-size: 1.8em; }
}
/* style.css */

/* --- Global Styles & Variables --- */
:root {
  --primary: #0056ff;
  --secondary: linear-gradient(135deg, #00E0FF, #00FFFF); /* Bright Cyan Gradient */
  --text: #222;
}

body {
  font-family: Poppins, sans-serif;
  margin: 0;
  background: var(--secondary);
  color: var(--text);
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

/* --- Header Styles --- */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(90deg, #0056ff, #00aaff);
  padding: 15px 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

/* Logo */
.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.logo-img {
  margin-right: 12px;
  filter: brightness(1) invert(0.9) sepia(0.8) saturate(3) hue-rotate(45deg);
}

.logo-text {
  font-size: 24px;
  color: #fff;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
  font-weight: 700;
}

/* Navbar links */
#navbar {
  display: flex;
  align-items: center;
  gap: 20px;
}

#navbar a {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 5px 0;
}

#navbar a:hover {
  color: #fffa;
  transform: scale(1.1);
}

/* Hamburger Icon */
#hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: 1002;
}

#hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Dropdown styles */
.dropdown {
  position: relative;
}

.dropbtn {
  background: none;
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  font-family: Poppins, sans-serif;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #0056ff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  min-width: 180px;
  z-index: 999;
  border: 1px solid #004acb;
}

.dropdown-content a {
  display: block;
  padding: 10px 15px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-content a:hover {
  background-color: #004acb;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* --- Mobile Responsive Menu --- */
@media screen and (max-width: 768px) {
  #hamburger {
    display: flex;
  }

  #navbar {
    position: fixed;
    top: 80px;
    right: 15px;
    width: 250px;
    background: linear-gradient(180deg, #0056ff, #00399d);
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
    gap: 0;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.25);
    z-index: 1001;
    border-radius: 12px;
    transform: translateX(110%);
    transition: transform 0.3s ease-in-out;
  }

  #navbar.show {
    display: flex;
    transform: translateX(0);
  }

  #navbar a, .dropdown {
    padding: 15px 25px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
  }

  .dropdown-content {
    position: static;
    display: none;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    border-radius: 0;
    border: none;
    min-width: 100%;
  }

  .dropdown-content a {
    color: #e0f7ff;
    font-weight: normal;
    padding-left: 40px;
  }

  .dropdown.active .dropdown-content {
    display: block;
  }
}

/* --- Footer Styles --- */
footer a {
  text-decoration: none;
  color: var(--primary);
  margin-right: 15px;
}

footer a:hover {
  color: #0039c1;
}

/* Social media icon hover effect */
.footer-social a:hover {
    transform: scale(1.15);
}