:root {
    --bg: #fafaf9;
    --bg-white: #ffffff;
    --text-primary: #0c0c0c;
    --text-secondary: #6b6b6b;
    --text-muted: #9a9a9a;
    --border: #e8e8e6;
    --border-light: #f0f0ee;
    --accent: #4f46e5;
    --accent-light: #eef2ff;
    --accent-glow: rgba(79, 70, 229, 0.08);
    --tag-bg: #f4f4f2;
    --sidebar-w: 260px;
    --header-h: 56px;
    --font-family: 'Outfit', sans-serif;
  }

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

  body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-flex; vertical-align: middle;
  }
  .filled { font-variation-settings: 'FILL' 1; }

  /* ── Header ── */
  .header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--header-h);
    display: flex; align-items: center; justify-content: center;
    background: rgba(250,250,249,0.92);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--border);
  }
  .header-inner {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 100%; padding: 0 24px;
  }
  .header-left { display: flex; align-items: center; gap: 24px; }
  .logo {
    font-weight: 800; font-size: 18px; letter-spacing: -0.04em;
    color: var(--text-primary); text-decoration: none;
    display: flex; align-items: center; gap: 8px;
  }
  .logo-mark {
    width: 26px; height: 26px; background: var(--accent); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 13px; font-weight: 700;
  }
  .header-search {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-white);
    color: var(--text-muted); font-size: 13px; cursor: pointer;
    transition: border-color 0.15s;
    min-width: 200px;
  }
  .header-search:hover { border-color: #ccc; }
  .header-search kbd {
    font-family: 'DM Mono', monospace; font-size: 11px;
    background: var(--tag-bg); padding: 2px 6px; border-radius: 4px;
    color: var(--text-muted); margin-left: auto; border: 1px solid var(--border);
  }
  .header-actions { display: flex; align-items: center; gap: 8px; }
  .btn-ghost { font-size: 13px; font-weight: 500; color: var(--text-secondary); background: none; border: none; cursor: pointer; padding: 7px 12px; transition: color 0.15s; font-family: inherit; border-radius: 6px; }
  .btn-ghost:hover { color: var(--text-primary); background: var(--tag-bg); }
  .btn-primary { font-size: 13px; font-weight: 600; color: white; background: var(--accent); border: none; cursor: pointer; padding: 7px 16px; border-radius: 7px; transition: all 0.2s; font-family: inherit; }
  .btn-primary:hover { background: #4338ca; }
  .btn-outline { font-size: 13px; font-weight: 500; color: var(--text-primary); background: var(--bg-white); border: 1px solid var(--border); cursor: pointer; padding: 6px 12px; border-radius: 7px; transition: all 0.15s; font-family: inherit; display: flex; align-items: center; gap: 6px; }
  .btn-outline:hover { background: var(--tag-bg); }
  .btn-outline .material-symbols-outlined { font-size: 16px; }

  /* ── Layout ── */
  .layout {
    display: flex;
    min-height: 100vh;
  }

  /* ── Sidebar ── */
  .sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    background: var(--bg-white);
    padding: 16px 0;
    z-index: 50;
  }
  /* Closed state */
.sidebar.closed {
  transform: translateX(-100%);
}
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

  .sidebar-section { padding: 0 12px; margin-bottom: 8px; }
  .sidebar-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    padding: 8px 12px 6px; display: flex; align-items: center; gap: 6px;
  }
  .sidebar-label .material-symbols-outlined { font-size: 15px; }

  .sidebar-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 14px; font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    gap: 8px;
  }
  .sidebar-item:hover {
    background: var(--tag-bg);
    color: var(--text-primary);
  }
  .sidebar-item.active {
    color: var(--text-primary);
    font-weight: 600;
    border: 1px solid var(--accent-glow);
  }
  .sidebar-item .item-left {
    display: flex; align-items: center; gap: 6px;
    overflow: hidden;
  }
  .sidebar-item .item-left .material-symbols-outlined { font-size: 16px; flex-shrink: 0; }
  .sidebar-item .item-left span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-count {
    font-family: 'DM Mono', monospace; font-size: 11px;
    color: var(--text-muted); flex-shrink: 0;
    background: var(--tag-bg); padding: 2px 7px; border-radius: 5px;
  }
  .sidebar-item.active .sidebar-count {
    color: var(--text-primary);
  }
  .sidebar-item .chevron {
    font-size: 16px; color: var(--text-muted); flex-shrink: 0;
    transition: color 0.15s;
  }
  .sidebar-item.active .chevron { color: var(--accent); }

  .sidebar-divider {
    height: 1px; background: var(--border); margin: 12px 16px;
  }

  /* ── Main ── */
  .main {
    flex: 1;
    margin-left: var(--sidebar-w);
    padding: 32px 60px 80px;
    max-width: calc(100% - var(--sidebar-w));
  }

  /* Page Header */
  .page-header { margin-bottom: 32px; }
  .page-header h1 {
    font-size: 24px; font-weight: 700; letter-spacing: -0.03em;
    margin-bottom: 10px;
  }
  .page-header p {
    font-size: 15px; line-height: 1.65; color: var(--text-secondary);
    max-width: 680px;
  }

  /* Section in main */
  .tool-section { margin-bottom: 48px; }
  .tool-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .tool-section-left { display: flex; align-items: center; gap: 10px; }
  .tool-section-icon {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent); font-size: 18px;
  }
  .tool-section-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
  .tool-section-count {
    font-family: 'DM Mono', monospace; font-size: 11px;
    color: var(--text-muted); background: var(--tag-bg);
    padding: 3px 8px; border-radius: 5px;
  }
  .tool-section-link {
    font-size: 13px; font-weight: 600; color: var(--accent);
    text-decoration: none; display: flex; align-items: center; gap: 3px;
    transition: gap 0.2s;
  }
  .tool-section-link:hover { gap: 6px; }
  .tool-section-link .material-symbols-outlined { font-size: 16px; }

  /* Grids */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

  /* Card */
  .card {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 20px; background: var(--bg-white);
    transition: all 0.25s cubic-bezier(0.2,0,0,1);
    cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(79,70,229,0.06);
    border-color: rgba(79,70,229,0.2);
  }
  .card .card-icon {
    width: 38px; height: 38px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--accent-light); color: var(--accent);
  }
  .card .card-icon .material-symbols-outlined { font-size: 20px; }
  .card-head { display: flex; align-items: flex-start; justify-content: space-between; }
  .card h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
  .card p { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
  .card .card-tags { margin-top: auto; display: flex; gap: 5px; flex-wrap: wrap; }
  .tag {
    font-family: 'DM Mono', monospace; font-size: 9.5px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 5px;
    background: var(--tag-bg); color: var(--text-muted);
  }
  .version-tag {
    font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500;
    padding: 3px 8px; border-radius: 5px;
    background: var(--tag-bg); color: var(--text-secondary);
  }
  .version-tag.beta { background: var(--accent-light); color: var(--accent); }

  /* Why Use banner */
  .why-banner {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 28px 32px; background: var(--bg-white);
    margin-bottom: 40px;
  }
  .why-banner h2 { font-size: 17px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
  .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .why-item { display: flex; gap: 10px; }
  .why-item .material-symbols-outlined { color: var(--accent); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
  .why-item h4 { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
  .why-item p { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }

  /* Mobile sidebar toggle */
  .mobile-sidebar-toggle {
    display: block;
    z-index: 200;
    padding: 4px 12px; border-radius: 100px;
    background: var(--text-primary); color: white;
    font-size: 11px; font-weight: 500; font-family: inherit;
    border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(79,70,229,0.3);
    gap: 6px; align-items: center;
  }
  .mobile-sidebar-toggle .material-symbols-outlined { font-size: 13px; }

  .mobile-sidebar-toggle-new {
    position: fixed; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: 100px;
    background: var(--text-primary); color: white;
    font-size: 11px; font-weight: 500; font-family: inherit;
    border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(79,70,229,0.3);
    gap: 6px; align-items: center;
  }
  .mobile-sidebar-toggle-new .material-symbols-outlined { font-size: 13px; }
    @media (max-width: 760px) {
      .mobile-sidebar-toggle-new {
        z-index: 200;
        position: fixed; top: 12px; left: 12px;
        padding: 4px 12px; border-radius: 100px;
        background: var(--text-primary); color: white;
        font-size: 11px; font-weight: 500; font-family: inherit;
        border: none; cursor: pointer;
        box-shadow: 0 4px 20px rgba(79,70,229,0.3);
        gap: 6px; align-items: center;
      }
    }

  .sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 49;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(2px);
  }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

  /* Responsive */
  @media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .header-search { display: none; }
  }
  @media (max-width: 768px) {
    .sidebar {
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.2,0,0,1);
      z-index: 200;
    }
    
    .sidebar.closed { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .main { margin-left: 0; max-width: 100%; padding: 50px 20px 80px; }
    .mobile-sidebar-toggle { display: flex; }
  }
  @media (max-width: 600px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
  }

  .dropdown-toggle{
    cursor: pointer;
  }

  .sidebar-search {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu.open {
  display: block;
}

  @media (min-width: 760px) {

/* 🔥 When sidebar is CLOSED */
.sidebar.closed ~ .main {
  margin-left: 100px;
}
  }

  /* Overlay */
.search-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 3000;
}
.search-modal.active{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

/* Open state */
.search-modal.active {
  display: flex;
}

/* Box */
.search-box {
  width: 600px;
  background: #fff;
  border-radius: 16px 16px 0px 0px;
  padding: 16px;
  animation: popup 0.2s ease;
  position: relative;
}
#searchResults{
  width: 600px;
  background: #f9f9f9;
  border-radius: 0px 0px 16px 16px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: popup 0.2s ease;
}
#searchResults .sidebar-item{
  background: var(--tag-bg);
  margin-bottom: 10px;
}

/* Input */
.search-box input {
  width: 100%;
  padding: 12px;
  border: none;
  outline: none;
  font-size: 16px;
}
.search-trigger{
  width: 90%;
  margin: 12px auto;
  font-size: 12px;
  position: relative;
}

/* Results */
.search-results {
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
}

/* Item */
.search-results a {
  display: block;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
}

.search-results a:hover {
  background: #f5f5f5;
}

/* Trigger */
.search-trigger {
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.shortcut-esc{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  background: #f3f3f3;
  padding: 2px 6px;
  border-radius: 6px;

}

@media (max-width: 760px) {
  .search-box {
    width: 356px !important;
    background: #fff;
    border-radius: 16px 16px 0px 0px;
    padding: 16px;
    animation: popup 0.2s ease;
    position: relative;
  }
  #searchResults{
    width: 356px !important;
    background: #f9f9f9;
    border-radius: 0px 0px 16px 16px;
    padding: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popup 0.2s ease;
  }
}

/* Animation */
@keyframes popup {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =============================
   PASSWORD GENERATOR
   ============================= */
#password-generator {
  max-width: 100%;
  margin: auto;
  background: #ffffff;
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#password-generator h2 {
  margin-bottom: 18px;
  font-size: 20px;
}

/* Output */
#password-generator .output-box {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

#password-generator .output-box input {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
}

#password-generator .output-box button {
  padding: 14px 16px;
  border: none;
  background: #111;
  color: #fff;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s;
}

#password-generator .output-box button:hover {
  background: #333;
}

/* Strength */
#password-generator .strength-bar {
  height: 6px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
}

#password-generator #strengthFill {
  height: 100%;
  width: 50%;
  transition: 0.3s;
}

#password-generator .strength-text {
  font-size: 13px;
  margin: 6px 0 16px;
}

/* Slider */
#password-generator .control {
  margin-bottom: 18px;
}

#password-generator .control input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 10px;
  background: #e5e5e5;
  outline: none;
}

#password-generator .control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: #111;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
}

#password-generator .control input[type="range"]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  background: #111;
  border-radius: 50%;
  cursor: pointer;
}

/* Options */
#password-generator .options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

#password-generator .options label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}

#password-generator .options label:hover {
  background: #f1f1f1;
}

#password-generator .options input {
  display: none;
}

/* Switch */
#password-generator .switch {
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 20px;
  position: relative;
  transition: 0.3s;
}

#password-generator .switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}

#password-generator .options input:checked + .switch {
  background: #111;
}

#password-generator .options input:checked + .switch::before {
  transform: translateX(18px);
}

/* Button */
#password-generator .generate-btn {
  width: 100%;
  padding: 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

#password-generator .generate-btn:hover {
  background: #333;
}

/* =============================
   LOREM GENERATOR
   ============================= */
#lorem-generator {
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}
#lorem-generator h2 {
  margin-bottom: 20px;
  font-size: 20px;
}

#lorem-generator .controls {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

#lorem-generator .control-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#lorem-generator .control-group label {
  font-size: 13px;
  margin-bottom: 6px;
  color: #555;
}

#lorem-generator select,
#lorem-generator input {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  outline: none;
}

#lorem-generator select:focus,
#lorem-generator input:focus {
  border-color: #111;
}

/* Buttons */
#lorem-generator .actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#lorem-generator .actions button {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

#lorem-generator #generate {
  background: #111;
  color: #fff;
}

#lorem-generator #generate:hover {
  background: #333;
}

#lorem-generator #copy {
  background: #eee;
}

#lorem-generator #copy:hover {
  background: #ddd;
}

/* Output */
#lorem-generator .output {
  background: #f9f9f9;
  padding: 18px;
  border-radius: 14px;
  line-height: 1.7;
  font-size: 15px;
  color: #333;
  min-height: 120px;
  white-space: pre-wrap;
}

/* =============================
   UUID GENERATOR
   ============================= */
#uuid-generator {
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}
#uuid-generator .controls {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

#uuid-generator .control-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#uuid-generator .control-group label {
  font-size: 13px;
  margin-bottom: 5px;
}

#uuid-generator input,
#uuid-generator select {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

/* Toggles */
#uuid-generator .toggles {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

#uuid-generator .toggles label {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}

#uuid-generator .toggles input { display: none; }

#uuid-generator .switch {
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 20px;
  position: relative;
}

#uuid-generator .switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}

#uuid-generator .toggles input:checked + .switch {
  background: #111;
}

#uuid-generator .toggles input:checked + .switch::before {
  transform: translateX(18px);
}

/* Buttons */
#uuid-generator .actions {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

#uuid-generator .actions button {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

#uuid-generator #generate {
  background: #111;
  color: #fff;
}

#uuid-generator #copyAll {
  background: #eee;
}

#uuid-generator #download {
  background: #ddd;
}

/* Output */
#uuid-generator .output {
  width: 100%;
  min-height: 180px;
  padding: 15px;
  border-radius: 12px;
  background: #f9f9f9;
  font-family: monospace;
}

/* Validator */
#uuid-generator .validator {
  margin-top: 20px;
}

#uuid-generator .validator input {
  width: 100%;
  margin-top: 8px;
}

#uuid-generator #validateResult {
  margin-top: 8px;
  font-weight: 600;
}

/* =============================
   Random Number GENERATOR
   ============================= */
   
#rng-container {
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#rng-title {
  margin-bottom: 20px;
  font-size: 20px;
}

#rng-controls {
  display: flex;
  gap: 10px;
}

#rng-min-group,
#rng-max-group,
#rng-count-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#rng-min-group input,
#rng-max-group input,
#rng-count-group input {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

/* Toggles */
#rng-toggles {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

#rng-unique-label,
#rng-decimal-label {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}

#rng-unique,
#rng-decimal {
  display: none;
}

#rng-unique-switch,
#rng-decimal-switch {
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 20px;
  position: relative;
}

#rng-unique-switch::before,
#rng-decimal-switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}

#rng-unique:checked + #rng-unique-switch,
#rng-decimal:checked + #rng-decimal-switch {
  background: #111;
}

#rng-unique:checked + #rng-unique-switch::before,
#rng-decimal:checked + #rng-decimal-switch::before {
  transform: translateX(18px);
}

/* Buttons */
#rng-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#rng-generate,
#rng-copy {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

#rng-generate {
  background: #111;
  color: #fff;
}

#rng-copy {
  background: #eee;
}

/* Output */
#rng-output {
  width: 100%;
  min-height: 150px;
  padding: 15px;
  border-radius: 12px;
  background: #f9f9f9;
  font-family: monospace;
}

/* =============================
   Bcrypt GENERATOR
   ============================= */

#bcrypt-container {
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#bcrypt-title {
  margin-bottom: 20px;
  font-size: 20px;
}

#bcrypt-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

#bcrypt-input {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

/* Slider */
#bcrypt-rounds-group {
  margin-bottom: 10px;
}

#bcrypt-rounds {
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: 5px;
  background: #ddd;
  outline: none;
}

#bcrypt-rounds::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: #111;
  border-radius: 50%;
  cursor: pointer;
}

/* Strength */
#bcrypt-strength {
  margin: 10px 0;
}

#bcrypt-strength-label {
  font-weight: 600;
}

/* Buttons */
#bcrypt-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#bcrypt-generate,
#bcrypt-copy {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

#bcrypt-generate {
  background: #111;
  color: #fff;
}

#bcrypt-copy {
  background: #eee;
}

/* Output */
#bcrypt-output {
  width: 100%;
  min-height: 150px;
  padding: 15px;
  border-radius: 12px;
  background: #f9f9f9;
  font-family: monospace;
}

/* =============================
   Md5 GENERATOR
   ============================= */
#md5-container {
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#md5-title {
  margin-bottom: 20px;
  font-size: 20px;
}

#md5-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

#md5-input {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

/* Toggle */
#md5-options {
  margin: 15px 0;
}

#md5-uppercase-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}

#md5-uppercase {
  display: none;
}

#md5-uppercase-switch {
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 20px;
  position: relative;
}

#md5-uppercase-switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}

#md5-uppercase:checked + #md5-uppercase-switch {
  background: #111;
}

#md5-uppercase:checked + #md5-uppercase-switch::before {
  transform: translateX(18px);
}

/* Buttons */
#md5-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#md5-generate,
#md5-copy {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

#md5-generate {
  background: #111;
  color: #fff;
}

#md5-copy {
  background: #eee;
}

/* Output */
#md5-output {
  width: 100%;
  min-height: 140px;
  padding: 15px;
  border-radius: 12px;
  background: #f9f9f9;
  font-family: monospace;
}

/* =============================
   SHA-256 GENERATOR
   ============================= */
#sha256-container {
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#sha256-title {
  margin-bottom: 20px;
  font-size: 20px;
}

#sha256-input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

#sha256-input {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

/* Toggle */
#sha256-options {
  margin: 15px 0;
}

#sha256-uppercase-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}

#sha256-uppercase {
  display: none;
}

#sha256-switch {
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 20px;
  position: relative;
}

#sha256-switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}

#sha256-uppercase:checked + #sha256-switch {
  background: #111;
}

#sha256-uppercase:checked + #sha256-switch::before {
  transform: translateX(18px);
}

/* Buttons */
#sha256-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#sha256-generate,
#sha256-copy {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

#sha256-generate {
  background: #111;
  color: #fff;
}

#sha256-copy {
  background: #eee;
}

/* Output */
#sha256-output {
  width: 100%;
  min-height: 150px;
  padding: 15px;
  border-radius: 12px;
  background: #f9f9f9;
  font-family: monospace;
}

/* =============================
   Inches to cm GENERATOR
   ============================= */
   #inchcm-container {
  max-width: 100%;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#inchcm-title {
  margin-bottom: 20px;
}

#inchcm-inputs {
  display: flex;
  gap: 10px;
}

#inchcm-inch-group,
#inchcm-cm-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#inchcm-inch,
#inchcm-cm {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

#inchcm-info {
  margin-top: 15px;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
}

/* Header */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 12px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.logo-dot {
  width: 18px;
  height: 18px;
  background: black;
  border-radius: 50%;
}

/* Toggle */
.mobile-sidebar-toggle {
  border: none;
  cursor: pointer;
}

/* Search */
.sidebar-search-box {
  position: relative;
  margin-bottom: 16px;
  padding: 0 12px;
}

.sidebar-search-box input {
  width: 100%;
  padding: 10px 60px 10px 12px;
  border-radius: 10px;
  border: 1px solid #eee;
}

.shortcut {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  background: #f3f3f3;
  padding: 2px 6px;
  border-radius: 6px;
}


/* =============================
   Feet & Inches to cm GENERATOR
   ============================= */
#ftcm-container {
  max-width: 600px;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}
#ftcm-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-family: var(--font-family);
}

#ftcm-inputs {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
}

#ftcm-feet-group,
#ftcm-inch-group,
#ftcm-cm-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#ftcm-feet,
#ftcm-inch,
#ftcm-cm {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

/* Result */
#ftcm-result {
  margin-top: 15px;
  padding: 14px;
  border-radius: 12px;
  background: #f4f4f4;
  text-align: center;
  font-weight: 600;
}
#ftcm-cm-group .generate-btn {
  width: 100%;
  padding: 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}
/* Info */
#ftcm-info {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
}

/* =============================
   Feet & Inches to cm GENERATOR
   ============================= */

   #lbskg-container {
  max-width: 100%;
  margin: auto;
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  padding: 35px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#lbskg-title {
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 600;
}

#lbskg-inputs {
  display: flex;
  gap: 15px;
  align-items: end;
}

#lbskg-pound-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#lbskg-pound-group label {
  font-size: 13px;
  margin-bottom: 6px;
  color: #666;
}

#lbskg-pound {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 15px;
  outline: none;
  transition: 0.25s;
}

#lbskg-pound:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* Button */
#lbskg-btn {
  padding: 14px 22px;
  border-radius: 12px;
  border: none;
  background: #000;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
}

#lbskg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(99,102,241,0.3);
}

/* Result */
#lbskg-result {
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  background: #f4f4f4;
  color: #333;
  text-align: center;
  font-weight: 600;
}

/* Info */
#lbskg-info {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  background: rgba(0,0,0,0.03);
  padding: 12px;
  border-radius: 12px;
}

/* Mobile */
@media (max-width: 600px) {
  #lbskg-inputs {
    flex-direction: column;
    align-items: stretch;
  }
}


/* =============================
   Markdown to Html Converter
   ============================= */
#md-container {
  max-width: 100%;
  margin: auto;
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#md-title {
  margin-bottom: 20px;
}

/* Editor */
#md-editor {
  margin-bottom: 15px;
}

#md-input {
  width: 100%;
  height: 180px;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-family: monospace;
  resize: vertical;
  outline: none;
}

#md-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* Buttons */
#md-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#md-convert,
#md-copy {
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.25s;
}

#md-convert {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
}

#md-copy {
  background: #111;
  color: #fff;
}

#md-convert:hover,
#md-copy:hover {
  transform: translateY(-1px);
}

/* Output */
#md-output {
  padding: 15px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eee;
  min-height: 120px;
  overflow-x: auto;
}

/* =============================
   Html to text convertor
   ============================= */
/* Container */
#htmltxt-container {
  max-width: 100%;
  margin: 20px auto;
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  font-family: var(--font-family);
  transition: all 0.3s ease;
}

/* Title */
#htmltxt-container h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 600;
  color: #111827;
}

/* Textarea */
#html-input {
  width: 100%;
  min-height: 200px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 14px;
  color: #111827;
  resize: vertical;
  outline: none;
  transition: all 0.25s ease;
}

#html-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Buttons wrapper */
#htmltxt-container > div:nth-of-type(2) {
  display: flex;
  gap: 12px;
  margin: 18px 0;
}

/* Buttons */
#htmltxt-container button {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: #333;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

#htmltxt-container button:hover {
  background: #333;
  transform: translateY(-1px);
}

/* Copy button variant */
#html-copy {
  background: #10b981;
}

#html-copy:hover {
  background: #059669;
}

/* Output box */
#html-output {
  margin-top: 10px;
  padding: 14px;
  min-height: 140px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  font-size: 14px;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

/* Placeholder state */
#html-output:empty::before {
  content: "Converted text will appear here...";
  color: #9ca3af;
}

/* Responsive */
@media (max-width: 600px) {
  #htmltxt-container {
    padding: 20px;
  }

  #htmltxt-container button {
    width: 100%;
  }

  #htmltxt-container > div:nth-of-type(2) {
    flex-direction: column;
  }
}


/* =============================
   Military to Standard Time Converter
   ============================= */
#mil-container {
  margin: 20px auto;
  padding: 25px;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

#mil-container h2 {
  margin-bottom: 15px;
  font-size: 20px;
  color: #111827;
}

#mil-input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  margin-bottom: 15px;
  font-size: 14px;
}

#mil-container > div {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#mil-container button {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: #333;
  color: #fff;
  cursor: pointer;
}

#mil-container button:hover {
  background: #333;
}

#mil-output {
  padding: 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  min-height: 40px;
  font-size: 15px;
}

#mil-output:empty::before {
  content: "Converted time will appear here...";
  color: #9ca3af;
}



/* =============================
   Unix to DateTime Converter
   ============================= */

#unix-container {
  margin: 20px auto;
  padding: 25px;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

#unix-container h2 {
  margin-bottom: 15px;
  font-size: 20px;
  color: #111827;
}

/* Input */
#unix-input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  margin-bottom: 12px;
}

/* Options */
#unix-options {
  display: flex;
  gap: 15px;
  font-size: 14px;
  margin-bottom: 10px;
}

#unix-options label {
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}

/* Buttons */
#unix-container > div:nth-of-type(2) {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

#unix-container button {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}

#unix-container button:hover {
  background: #1f2937;
}

/* Output */
#unix-output {
  padding: 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  min-height: 50px;
  font-size: 14px;
}

#unix-output:empty::before {
  content: "Converted date will appear here...";
  color: #9ca3af;
}



/* =============================
   HEX to RGB Converter
   ============================= */

#hexrgb-container {
  margin: 20px auto;
  padding: 25px;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  font-family: var(--font-family);

}
#hexrgb-container h2{
  margin-bottom: 15px;
  font-size: 20px;
}

/* Input */
#hex-input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  margin-bottom: 10px;
}

/* Options */
#hex-options {
  display: flex;
  gap: 15px;
  font-size: 14px;
  margin-bottom: 10px;
}

#hex-options label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Buttons */
#hexrgb-container > div:nth-of-type(2) {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

#hexrgb-container button {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}

#hexrgb-container button:hover {
  background: #1f2937;
}

/* Color Preview */
#hex-preview {
  height: 60px;
  border-radius: 10px;
  margin-top: 10px;
  border: 1px solid #e5e7eb;
}

/* Output */
#hex-output {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  font-size: 14px;
}

#hex-output:empty::before {
  content: "RGB value will appear here...";
  color: #9ca3af;
}


/* =============================
   RGB to HEX Converter
   ============================= */

#rgbhex-container {
  margin: 20px auto;
  padding: 25px;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}
#rgbhex-container h2{
  margin-bottom: 15px;
  font-size: 20px;
}

/* Inputs row */
#rgb-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

#rgb-inputs input {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/* Options */
#rgb-options {
  display: flex;
  gap: 15px;
  font-size: 14px;
  margin-bottom: 10px;
}

#rgb-options label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Buttons */
#rgbhex-container > div:nth-of-type(3) {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

#rgbhex-container button {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}

#rgbhex-container button:hover {
  background: #1f2937;
}

/* Preview */
#rgb-preview {
  height: 60px;
  border-radius: 10px;
  margin-top: 10px;
  border: 1px solid #e5e7eb;
}

/* Output */
#rgb-output {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
}

#rgb-output:empty::before {
  content: "HEX value will appear here...";
  color: #9ca3af;
}

/* =============================
   SPF Record Generator
   ============================= */
#spf-record-generater {
  max-width: 600px;
  margin: 30px auto;
  padding: 25px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  font-family: Arial, sans-serif;
}

#spf-record-generater h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* Inputs */
#spf-record-generater input,
#spf-record-generater select,
#spf-record-generater textarea {
  width: 100%;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: 0.2s ease;
}

#spf-record-generater input:focus,
#spf-record-generater select:focus,
#spf-record-generater textarea:focus {
  border-color: #000;
  outline: none;
}

/* Buttons */
#spf-record-generater button {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: none;
  border-radius: 6px;
  background: #000; /* black button */
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}

#spf-record-generater button:hover {
  background: #333;
}

/* Checkbox group */
#spf-record-generater label {
  display: inline-block;
  margin-right: 15px;
  font-size: 14px;
  cursor: pointer;
}

#spf-record-generater input[type="checkbox"] {
  margin-right: 5px;
}

/* IP List */
#spf-record-generater ul {
  list-style: none;
  padding: 0;
}

#spf-record-generater li {
  background: #f5f5f5;
  padding: 8px 10px;
  margin: 5px 0;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#spf-record-generater li button {
  width: auto;
  padding: 4px 8px;
  font-size: 12px;
  background: #e74c3c;
}

#spf-record-generater li button:hover {
  background: #c0392b;
}

/* Output */
#spf-record-generater textarea {
  height: 100px;
  resize: none;
  background: #fafafa;
}

/* Responsive */
@media (max-width: 600px) {
  #spf-record-generater {
    padding: 15px;
  }
}


/* =============================
   DMARC Record Generator
   ============================= */
#dmarc-record-generator {
  max-width: 600px;
  margin: 30px auto;
  padding: 25px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  font-family: Arial, sans-serif;
}

#dmarc-record-generator h2 {
  text-align: center;
  margin-bottom: 20px;
}

#dmarc-record-generator label {
  font-weight: 600;
  display: block;
  margin-top: 10px;
}

#dmarc-record-generator input,
#dmarc-record-generator select,
#dmarc-record-generator textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

#dmarc-record-generator textarea {
  height: 100px;
  background: #fafafa;
}

#dmarc-record-generator input:focus,
#dmarc-record-generator select:focus {
  border-color: #000;
  outline: none;
}

.hint {
  font-size: 12px;
  color: #666;
}

.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.bottom-bar button {
  background: #000;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#warning {
  color: #e67e22;
  font-size: 13px;
  margin-top: 5px;
}

#copyMsg {
  color: green;
  font-size: 13px;
  margin-top: 5px;
}

/* =============================
   PNG to JPG Generator
   ============================= */
   #image-converter {
  max-width: 520px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
  text-align: center;
}

/* Title */
#image-converter h2 {
  margin-bottom: 20px;
  font-size: 22px;
}

/* Upload Box (modern drop zone) */
.upload-box {
  display: block;
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 25px;
  cursor: pointer;
  transition: 0.3s ease;
  background: #fafafa;
}

.upload-box:hover {
  border-color: #000;
  background: #f5f5f5;
}

.upload-box input {
  display: none;
}

.upload-box span {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}

.upload-box small {
  color: #777;
}

/* Convert Button (primary) */
.convert-btn {
  width: 100%;
  margin-top: 15px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.convert-btn:hover {
  background: #000;
}

/* Download Button (DARK PREMIUM) */
.download-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px;
  width: 100%;
  border-radius: 8px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s;
}

.download-btn:hover {
  background: #333;
}

/* Message */
#msg {
  margin-top: 10px;
  font-size: 14px;
  color: green;
}

/* Mobile */
@media (max-width: 600px) {
  #image-converter {
    margin: 20px;
    padding: 20px;
  }
}
#previewContainer {
  margin-top: 15px;
}

#previewImage {
  max-width: 40%;
  border-radius: 10px;
  margin-top: 10px;
}

#fileInfo {
  font-size: 13px;
  color: #555;
  margin-top: 5px;
}

/* =============================
   JWT Token Validator
   ============================= */

#jwt-validator {
  max-width: 700px;
  margin: 40px auto;
  padding: 28px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  font-family: Arial, sans-serif;
}

/* TEXTAREA */
#jwt-validator textarea {
  width: 100%;
  height: 120px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  font-family: monospace;
  background: #fafafa;
  transition: 0.2s;
}

#jwt-validator textarea:focus {
  outline: none;
  border-color: #000;
  background: #fff;
}

/* BUTTON */
#jwt-validator button {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

#jwt-validator button:hover {
  background: #222;
}

/* STATUS (neutral styles only) */
#status {
  margin-top: 12px;
  font-weight: 600;
  font-size: 14px;
}

/* Instead of colors, use tone differences */
.valid {
  color: #000;
}

.expired {
  color: #555;
}

.invalid {
  color: #999;
}

/* OUTPUT SECTION */
.output {
  margin-top: 22px;
}

/* DARK CODE BLOCK */
.output pre {
  background: #0f0f0f;
  color: #eaeaea;
  padding: 14px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13px;
  border: 1px solid #222;
}

/* HEADINGS */
.output h4 {
  margin-bottom: 6px;
  font-size: 14px;
  color: #111;
}

/* OPTIONAL: subtle divider */
.output h4:not(:first-child) {
  margin-top: 15px;
}

/* =============================
   Caesar Cipher Tool
   ============================= */

#caesar-tool {
  max-width: 700px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#caesar-tool h2 {
  text-align: center;
}

#caesar-tool textarea {
  width: 100%;
  height: 120px;
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

#caesar-tool input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

#caesar-tool .buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

#caesar-tool button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#caesar-tool button:hover {
  opacity: 0.85;
}

#caesar-tool #result {
  margin-top: 15px;
  padding: 12px;
  background: #f1f1f1;
  border-radius: 8px;
  min-height: 50px;
  word-break: break-word;
}
#caesar-tool .copy-btn {
  margin-top: 10px;
  width: 25%;
}

/* =============================
   Profile Picture Maker
   ============================= */

#pp-tool {
  max-width: 900px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: Arial;
}

/* Layout */
#pp-tool .wrapper {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

#pp-tool .left {
  flex: 1;
  text-align: center;
}

#pp-tool .right {
  flex: 1;
}

/* Canvas */
#pp-tool canvas {
  background: #f5f5f5;
  border-radius: 50%;
  cursor: grab;
  margin-top: 10px;
}

/* Controls */
#pp-tool label {
  font-size: 14px;
  display: block;
  margin-top: 12px;
}

#pp-tool input,
#pp-tool select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Buttons */
#pp-tool button {
  margin-top: 15px;
  padding: 12px;
  width: 100%;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

#pp-tool button:hover {
  opacity: 0.9;
}

/* =============================
   Nautical miles to miles
   ============================= */
   #nm-tool {
  max-width: 600px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: Arial;
  text-align: center;
}

#nm-tool h2 {
  margin-bottom: 15px;
}

#nm-tool input {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}

#nm-tool .result {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 18px;
}

#nm-tool button {
  margin-top: 15px;
  width: 100%;
  padding: 12px;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

#nm-tool button:hover {
  opacity: 0.85;
}


/* =============================
   Word count to reading time
   ============================= */
#rt-tool {
  max-width: 650px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: Arial;
}

#rt-tool h2 {
  text-align: center;
  margin-bottom: 15px;
}

#rt-tool textarea {
  width: 100%;
  height: 180px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: none;
  font-size: 14px;
}

#rt-tool .stats {
  margin-top: 15px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 16px;
}

#rt-tool button {
  margin-top: 12px;
  width: 100%;
  padding: 12px;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

#rt-tool button:hover {
  opacity: 0.85;
}

/* =============================
   Weeks to days converter
   ============================= */

#wd-tool {
  max-width: 600px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: Arial;
  text-align: center;
}

#wd-tool h2 {
  margin-bottom: 15px;
}

#wd-tool input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 10px;
}

#wd-tool .result {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 18px;
}

#wd-tool button {
  margin-top: 15px;
  width: 100%;
  padding: 12px;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

#wd-tool button:hover {
  opacity: 0.85;
}
/* =============================
  Color history timeline
   ============================= */
   #color-tool {
  max-width: 950px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: Arial;
}

#color-tool h2 {
  text-align: center;
  margin-bottom: 15px;
}

/* Controls */
#color-tool .controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

#color-tool input,
#color-tool select {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Grid */
#color-tool .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}

/* Card */
#color-tool .card {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

#color-tool .preview {
  height: 90px;
}

/* Info */
#color-tool .info {
  padding: 12px;
}

#color-tool .name {
  font-weight: bold;
  font-size: 15px;
}

#color-tool .hex {
  font-size: 12px;
  color: #555;
  margin-top: 3px;
}

#color-tool .desc {
  font-size: 12px;
  margin-top: 8px;
  color: #333;
  line-height: 1.4;
}

/* Score */
#color-tool .score {
  margin-top: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #000;
}

/* =============================
  Duotone Color Generater
   ============================= */
#duo-tool {
  max-width: 900px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: Arial;
  text-align: center;
}

#duo-tool h2 {
  margin-bottom: 15px;
}

/* Layout */
#duo-tool .wrap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Canvas */
#duo-canvas {
  width: 350px;
  height: 350px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

/* Controls */
#duo-tool .controls {
  flex: 1;
  text-align: left;
}

#duo-tool input {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
}

#duo-tool button {
  margin-top: 15px;
  width: 100%;
  padding: 12px;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

#duo-tool button:hover {
  opacity: 0.85;
}


/* =============================
  Broken image checker Generater
   ============================= */
#img-checker {
  max-width: 900px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-align: center;
}

#input {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 10px;
    resize: vertical;
}

#img-checker button {
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

#img-checker button:hover {
    background-color: #3f57d0;
}

#results {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;max-height: 400px;
    overflow-y: auto;
}

.result-item {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.result-item span {
    margin-right: 10px;
    font-weight: bold;
}

.result-item.ok {
    background-color: #e0f7e9;
    color: #2d7a3e;
}

.result-item.broken {
    background-color: #ffe0e0;
    color: #d12d2d;
}

/* =============================
  Cron checker
   ============================= */
#cron-checker {
  max-width: 900px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-align: center;
}

#cron-input {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 10px;
    resize: vertical;
}

#cron-checker button {
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

#cron-checker button:hover {
    background-color: #d0523f;
}

#cron-results {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.cron-item {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.cron-item span {
    margin-right: 10px;
    font-weight: bold;
}

.cron-item.success {
    background-color: #e0f7e9;
    color: #2d7a3e;
}

.cron-item.failed {
    background-color: #ffe0e0;
    color: #d12d2d;
}

/* =============================
  Slug generater
   ============================= */

#slug-tool {
  max-width: 720px;
  margin: 50px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8e8e6;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  font-family: var(--font-family);
  transition: all 0.3s ease;
}

/* Heading */
#slug-tool h2 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #111;
}

/* Textarea */
#slug-tool textarea {
  width: 100%;
  height: 130px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
  transition: 0.2s;
  resize: none;
}

#slug-tool textarea:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* Output */
#slug-tool input {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
  background: #fafafa;
}

#slug-tool input:focus {
  outline: none;
  border-color: #000;
}

/* Options */
#slug-tool .options {
  margin: 18px 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: #333;
}

/* Checkbox style */
#slug-tool .options input[type="checkbox"] {
  accent-color: black;
  margin-right: 5px;
  cursor: pointer;
}

/* Dropdown */
#slug-tool select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
}

/* Buttons container */
#slug-tool .buttons {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

/* Buttons */
#slug-tool button {
  padding: 11px 16px;
  border: none;
  background: black;
  color: white;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* Hover effect */
#slug-tool button:hover {
  background: #222;
  transform: translateY(-1px);
}

/* Active click */
#slug-tool button:active {
  transform: scale(0.97);
}

/* Copy success effect (optional class) */
#slug-tool button.copied {
  background: #16a34a;
}

/* Mobile */
@media (max-width: 600px) {
  #slug-tool {
    padding: 20px;
  }

  #slug-tool .options {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #slug-tool .buttons {
    flex-direction: column;
  }

  #slug-tool button {
    width: 100%;
  }
}

/* =============================
  Gif to mp4 converter
   ============================= */
#gif-tool {
  max-width: 720px;
  margin: 50px auto;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8e8e6;
}

#gif-tool input {
  margin: 15px 0;
}

#gif-tool video {
  width: 100%;
  margin-top: 20px;
  border-radius: 10px;
}

#gif-tool .buttons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

#gif-tool button {
  padding: 10px 15px;
  background: black;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* =============================
  Add text to image
   ============================= */
#text-image-tool {
  max-width: 720px;
  margin: 50px auto;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8e8e6;
}

#text-image-tool canvas {
  height: 400px;
  width: 100%;
  margin: 20px 0;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #ddd;
}

#text-image-tool input[type="text"] {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#text-image-tool .controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

#text-image-tool button {
  margin-top: 15px;
  padding: 10px 15px;
  background: black;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
#text-image-tool select {
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
#text-image-tool #bg-color{
  height: 60px;
}

/* =============================
 Numerical to roman and roman to numeric
   ============================= */

#roman-tool {
  max-width: 600px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e8e6;
  text-align: center;
}

#roman-tool input {
  width: 100%;
  padding: 12px;
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#roman-tool .buttons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

#roman-tool button {
  padding: 10px 15px;
  background: black;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  font-size: 22px;
  font-weight: bold;
}

/* =============================
  Month to days converter
   ============================= */

#month-days-tool {
  max-width: 500px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e8e6;
  text-align: center;
}

#month-days-tool select,
#month-days-tool input {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#month-days-tool #result {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}

/* =============================
  case converter
   ============================= */
#case-converter {
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#case-converter textarea {
  width: 100%;
  height: 120px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  resize: none;
}

.buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.buttons button {
  flex: 1;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

#copy-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* =============================
  Hex to Hsl
   ============================= */

#hex-hsl-tool {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  font-family: var(--font-family);
  text-align: center;
}

#hex-hsl-tool input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
}

#preview {
  height: 80px;
  border-radius: 6px;
  margin: 10px 0;
  border: 1px solid #eee;
}

#copy-btn {
  margin-top: 10px;
  padding: 10px;
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* =============================
  HTML validator
   ============================= */

#html-validator {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  font-family: Arial;
}

#html-validator textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

#validate-btn {
  margin-top: 10px;
  padding: 10px;
  width: 100%;
  background: black;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* =============================
  Paypal Link Generater
   ============================= */
#paypal-generator {
  max-width: 650px;
  margin: 50px auto;
  padding: 25px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

/* Title */
#paypal-generator h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #111;
}

/* Inputs & Select */
#paypal-generator input,
#paypal-generator select,
#paypal-generator textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  transition: 0.2s ease;
}

/* Focus effect */
#paypal-generator input:focus,
#paypal-generator select:focus,
#paypal-generator textarea:focus {
  border-color: #000;
  outline: none;
}

/* Button */
#paypal-generator button {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s ease;
}

/* Button hover */
#paypal-generator button:hover {
  opacity: 0.85;
}

/* Result textarea */
#paypal-generator textarea {
  height: 90px;
  resize: none;
  background: #fafafa;
}

/* Copy button (optional) */
#paypal-generator .copy-btn {
  margin-top: 10px;
  background: #222;
}

/* Small spacing utility */
#paypal-generator .row {
  display: flex;
  gap: 10px;
}

#paypal-generator .row > * {
  flex: 1;
}

/* =============================
  Svg to png converter
   ============================= */

#svg-converter {
  max-width: 650px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
  text-align: center;
}

#svg-converter h2 {
  margin-bottom: 20px;
}

#svg-converter input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

#svg-converter .row {
  display: flex;
  gap: 10px;
}

#svg-converter button {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#svg-converter canvas {
  margin-top: 20px;
  max-width: 100%;
}

#svg-converter a {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 15px;
  background: #222;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

/* =============================
  Troy Ounce converter
   ============================= */

#troy-converter {
  max-width: 600px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#troy-converter h2 {
  text-align: center;
  margin-bottom: 20px;
}

#troy-converter h3 {
  margin-top: 25px;
  font-size: 16px;
  color: #444;
}

#troy-converter input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
}

#troy-converter input:focus {
  border-color: #000;
  outline: none;
}

#troy-converter .results {
  background: #fafafa;
  padding: 15px;
  border-radius: 10px;
}

#troy-converter .results div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

#troy-converter .results span {
  color: #555;
}

#troy-converter .results b {
  color: #000;
}

/* =============================
  Duplicate line Remover
   ============================= */

#duplicate-remover {
  max-width: 700px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#duplicate-remover h2 {
  text-align: center;
  margin-bottom: 20px;
}

#duplicate-remover textarea {
  width: 100%;
  height: 140px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 15px;
  resize: vertical;
}

#duplicate-remover .options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 14px;
}

#duplicate-remover button {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

#duplicate-remover button:hover {
  opacity: 0.9;
}

/* =============================
  Leap Years tools
   ============================= */

#leap-year-pro {
  max-width: 700px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#leap-year-pro h2 {
  text-align: center;
  margin-bottom: 20px;
}

#leap-year-pro input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

#leap-year-pro #result-box {
  background: #fafafa;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
}

#leap-year-pro .range-box {
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

#leap-year-pro textarea {
  width: 100%;
  height: 120px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#leap-year-pro button {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* =============================
  HSL to HEX Converter
   ============================= */
/* Container */
#hsl-to-hex {
  max-width: 620px;
  margin: 60px auto;
  padding: 28px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

/* Title */
#hsl-to-hex h2 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 22px;
}

/* Labels */
#hsl-to-hex label {
  font-size: 13px;
  color: #555;
  margin-top: 14px;
  display: block;
}

/* Number Inputs */
#hsl-to-hex input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  outline: none;
}

/* RANGE BASE */
#hsl-to-hex input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  margin-top: 8px;
  border-radius: 10px;
  outline: none;
  background: linear-gradient(to right, #000, #fff); /* BLACK → WHITE */
}

/* THUMB */
#hsl-to-hex input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #000;
}

#hsl-to-hex input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Preview Box */
#preview {
  height: 130px;
  border-radius: 12px;
  margin: 20px 0;
  border: 1px solid #eee;
}

/* HEX Output */
#output {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

/* Button */
#hsl-to-hex button {
  width: 100%;
  padding: 13px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}

#hsl-to-hex button:hover {
  opacity: 0.85;
}


/* =============================
  Css validator
   ============================= */

#css-validator {
  max-width: 700px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#css-validator h2 {
  text-align: center;
  margin-bottom: 20px;
}

#css-validator textarea {
  width: 100%;
  height: 180px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 15px;
}

#css-validator button {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
}

/* =============================
  cron expression generater
   ============================= */

#cron-generator {
  max-width: 650px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#cron-generator h2 {
  text-align: center;
  margin-bottom: 20px;
}

.cron-box {
  margin-bottom: 15px;
}

#cron-generator select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.cron-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 15px 0;
}

#cron-generator input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#cron-generator button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

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

#output {
  font-size: 18px;
  font-weight: bold;
}

/* =============================
  webp to jpg converter
   ============================= */

   #image-converter {
  max-width: 520px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
  text-align: center;
}

.upload-box {
  display: block;
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 25px;
  cursor: pointer;
  background: #fafafa;
}

.upload-box input {
  display: none;
}

#previewContainer {
  margin-top: 15px;
}

#previewImage {
  max-width: 36%;
  border-radius: 10px;
  margin-top: 10px;
}

#fileInfo {
  font-size: 13px;
  color: #555;
}

.convert-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
}

.download-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px;
  width: 100%;
  background: #111;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}

/* =============================
  Pool water temp tool
   ============================= */

   #pool-temp-tool {
  max-width: 520px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
  text-align: center;
}

.sub-text {
  font-size: 13px;
  color: #666;
  margin-bottom: 15px;
}

.input-box {
  text-align: left;
  margin-bottom: 15px;
}

.input-box label {
  font-size: 13px;
  color: #444;
}

.input-box input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#tempSlider {
  width: 100%;
  margin: 15px 0;
}

.result-box {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #f7f7f7;
  font-weight: 600;
}

#colorBar {
  height: 8px;
  width: 100%;
  margin-top: 15px;
  border-radius: 20px;
  background: #ddd;
  transition: 0.3s;
}

/* =============================
  Json to Csv Converter
   ============================= */

#json-csv-converter {
  max-width: 650px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: var(--font-family);
}

#json-csv-converter textarea {
  width: 100%;
  height: 160px;
  padding: 12px;
  margin-bottom: 12px;
  margin-top: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-family: monospace;
}

.convert-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  cursor: pointer;
}

.download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px;
  width: 100%;
  background: #111;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
}

/* =============================
  Overtime calculator
   ============================= */

   #overtime-calculator {
  max-width: 550px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: Arial;
  text-align: center;
}

#overtime-calculator .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 15px;
}

#overtime-calculator input,
#overtime-calculator select {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  width: 100%;
}

.convert-btn {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.result-box {
  margin-top: 15px;
  padding: 15px;
  background: #f7f7f7;
  border-radius: 10px;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
}

/* =============================
  HEX to CMYK converter
   ============================= */
#hex-cmyk {
  max-width: 520px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: Arial;
  text-align: center;
}

#hexInput {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#colorPreview {
  height: 80px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: #eee;
  border: 1px solid #ddd;
}

.convert-btn {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.result-box {
  margin-top: 15px;
  padding: 15px;
  background: #f7f7f7;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}

/* =============================
  JS error checker
   ============================= */
   #js-error-checker {
  max-width: 650px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: Arial;
}

#js-error-checker textarea {
  width: 100%;
  height: 180px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-family: monospace;
  margin-bottom: 10px;
}

.convert-btn {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.result-box {
  margin-top: 15px;
  padding: 15px;
  background: #f7f7f7;
  border-radius: 10px;
  font-family: monospace;
  white-space: pre-wrap;
}