:root {
      --bg-color: #121212;
      --card-color: #1e1e1e;
      --text-color: #f1f1f1;
      --accent-color: #0095f6;
      --danger-color: #e63946;
      --border-radius: 10px;
      --transition: 0.2s ease-in-out;
    }

    body.light-mode {
      --bg-color: #f5f5f5;
      --card-color: #ffffff;
      --text-color: #111111;
      --accent-color: #007aff;
      --danger-color: #d32f2f;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      padding-top: 60px;
      transition: background-color var(--transition), color var(--transition);
    }

    .container {
      background-color: var(--card-color);
      padding: 30px;
      width: 90%;
      max-width: 600px;
      border-radius: var(--border-radius);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      transition: background-color var(--transition);
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      font-size: 1.8rem;
    }

    input[type="text"] {
      box-sizing: border-box;
      width: 100%;
      padding: 14px;
      font-size: 16px;
      border: none;
      border-radius: var(--border-radius);
      margin-bottom: 15px;
      margin-right: 10px;
      background-color: #2c2c2c;
      color: var(--text-color);
      transition: background-color var(--transition);
    }

    body.light-mode input[type="text"] {
      background-color: #eeeeee;
      color: #111;
    }

 



    button {
      font-family: 'Roboto', sans-serif;
      padding: 10px 18px;
      font-size: 16px;
      background-color: var(--accent-color);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: background-color var(--transition);
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    button:hover {
      background-color: #0077cc;
    }

    .copy-btn {
      background-color: #2e2e2e;
      color: var(--text-color);
    }

    body.light-mode .copy-btn {
      background-color: #eeeeee;
      color: #111;
    }

    .copy-btn:hover {
      background-color: #444;
    }

    .clear-btn {
      background-color: var(--danger-color);
    }

    .clear-btn:hover {
      background-color: #c62828;
    }

    .output {
      margin-top: 20px;
      background-color: #2a2a2a;
      padding: 15px;
      border-radius: var(--border-radius);
      word-break: break-word;
      transition: background-color var(--transition);
    }

    body.light-mode .output {
      background-color: #f0f0f0;
    }

    ul {
      list-style-type: none;
      padding-left: 0;
      margin-top: 15px;
    }

    li {
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #242424;
      padding: 10px 12px;
      border-radius: var(--border-radius);
      transition: background-color var(--transition);
    }

    body.light-mode li {
      background-color: #eeeeee;
    }

    a {
      color: var(--accent-color);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .theme-toggle {
      position: absolute;
      top: 20px;
      right: 20px;
    }

    /* Common rounded button style */
button {
  border-radius: 999px; /* super rounded / pill shape */
  font-weight: 600;
  padding: 12px 20px;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* Add a subtle zoom on hover */
button:hover {
  transform: scale(1.03);
}

/* Clean Link button — vibrant blue gradient */
button.clean-btn {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: white;
  border: none;
}

/* Clear History button — deeper red gradient */
button.clear-btn {
  background: linear-gradient(135deg, #e53935, #b71c1c);
  color: white;
  border: none;
}

/* Theme toggle — neutral gradient */
button.theme-toggle {
  background: linear-gradient(135deg, #6e6e6e, #9e9e9e);
  color: white;
  border: none;
}

/* Optional: match the copy/open buttons too */
.copy-btn {
  background: linear-gradient(135deg, #444, #666);
  color: white;
  border: none;
  border-radius: 999px;
}

button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

    @media (max-width: 500px) {
      li {
        flex-direction: column;
        align-items: flex-start;
      }

      .copy-btn {
        margin: 10px 0 0 0;
        width: 100%;
      }
    }

    svg {
      width: 18px;
      height: 18px;
    }