/* ===============================
   GLOBAL RESET & BASE
================================*/
body {
  margin:0;
  font-family:Arial, sans-serif;
  background:#f6f7fb;
  transition:.3s;
}

.dark-mode {
  background:#1c1c1e;
  color:#e6e6e6;
}

.wrapper {
  max-width:1100px;
  margin:auto;
  padding:0 16px;
}

/* ===============================
   HEADER
================================*/
.site-header {
  width:100%;
  background:white;
  border-bottom:1px solid #e5e7eb;
  position:sticky;
  top:0;
  z-index:999;
}

.dark-mode .site-header {
  background:#2a2a2d;
  border-color:#444;
}

.site-header .wrapper {
  height:65px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand {
  font-size:22px;
  font-weight:700;
  color:#222;
  text-decoration:none;
}

.dark-mode .brand {
  color:white;
}

/* NAV */
.nav {
  display:flex;
  align-items:center;
  gap:22px;
}

.nav a {
  text-decoration:none;
  font-size:15px;
  color:#333;
}

.dark-mode .nav a {
  color:#ccc;
}

.theme-toggle {
  background:#1f6fff;
  border:none;
  padding:6px 14px;
  border-radius:6px;
  color:white;
  cursor:pointer;
  font-size:18px;
}

/* Mobile Menu */
.menu-toggle {
  display:none;
  cursor:pointer;
  font-size:26px;
  background:none;
  border:none;
}

@media(max-width:700px) {

  .menu-toggle {
    display:block;
  }

  .nav {
    position:absolute;
    right:12px;
    top:68px;
    background:white;
    width:220px;
    padding:18px;
    border-radius:12px;
    border:1px solid #ddd;
    display:none;
    flex-direction:column;
    gap:14px;
  }

  .dark-mode .nav {
    background:#2a2a2d;
    border-color:#444;
  }

  .nav.show {
    display:flex;
  }
}

/* ===============================
   TOOL PAGE CONTENT
================================*/
.tool-container {
  max-width:900px;
  margin:30px auto;
  padding:0 16px;
  text-align:center;
}

/* Headings */
.tool-container h1 {
  font-size:32px;
  margin-bottom:10px;
}

.tool-container p.subtitle {
  max-width:650px;
  margin:auto;
  font-size:16px;
  color:#444;
}

.dark-mode .tool-container p.subtitle {
  color:#ccc;
}

/* Card */
.card {
  background:white;
  padding:32px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  margin-top:24px;
}

.dark-mode .card {
  background:#2a2a2d;
  border-color:#555;
}

/* ===============================
   DROPZONE (Fixed version)
================================*/
.dropzone {
  border:2px dashed #b3b3b3;
  padding:32px;
  border-radius:12px;
  background:#fcfcfc;
  cursor:pointer;
}

.dark-mode .dropzone {
  background:#3a3a3e;
  border-color:#777;
}

/* Fix spacing around “or” */
.dropzone strong {
  display:block;
  margin:10px 0;
}

/* Select button wrapper (fixed on all tools) */
.btn-main {
  display:inline-flex !important;
  justify-content:center;
  align-items:center;
  width:70%;
  max-width:260px;
  margin:12px auto 0 auto !important;
  padding:12px 0;
  background:#1f6fff;
  color:white;
  border-radius:8px;
  position:relative;
  overflow:hidden;
  font-size:16px;
  cursor:pointer;
}

/* Fix Choose-file overflow */
.btn-main input[type="file"] {
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

/* ===============================
   CTA Buttons
================================*/
.btn-action {
  background:#1f6fff;
  color:white;
  border:none;
  padding:12px 24px;
  border-radius:8px;
  cursor:pointer;
  font-size:16px;
  margin-top:20px;
}

.btn-action:hover {
  background:#004ad1;
}

/* ===============================
   FOOTER
================================*/
.site-footer {
  background:#000;
  padding:32px 16px;
  margin-top:60px;
  color:white;
  text-align:center;
  font-size:14px;
}

.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-bottom:12px;
}

.site-footer a {
  color:#ddd;
  text-decoration:none;
}

.site-footer a:hover {
  color:#4c8bff;
}

/* ===============================
   MOBILE OVERRIDES
================================*/
@media(max-width:600px) {

  .dropzone {
    padding:24px !important;
  }

  body {
    overflow-x:hidden !important;
  }
}