<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Webbify - Auth v0.2</title>

  <style>
    [data-theme="light"] {
      --color-bg: #f0f2f5;
      --color-text: #333;
      --color-primary: #9b59b6;
      --color-primary-hover: #8e44ad;
      --color-form-bg: rgba(255, 255, 255, 0.8);
      --color-container-bg: rgba(255, 255, 255, 0.6);
      --color-input-bg: #fff;
      --color-input-text: #333;
      --color-toggle-bg: #ccc;
      --title-gradient: linear-gradient(90deg, #9b59b6, #2980b9);
      --ring-color: conic-gradient(
        from 180deg at 50% 50%,
        #9b59b6,
        #2980b9,
        #f1c40f,
        #e67e22,
        #e74c3c,
        #9b59b6
      );
      --wave1-gradient: linear-gradient(to right, #9b59b6, #2980b9);
      --wave2-gradient: linear-gradient(to right, #f1c40f, #e67e22);
      --wave3-gradient: linear-gradient(to right, #2d3436, #b2bec3);
      --transition-speed: 0.4s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    [data-theme="dark"] {
      --color-bg: #1e1e1e;
      --color-text: #f5f5f5;
      --color-primary: #9b59b6;
      --color-primary-hover: #8e44ad;
      --color-form-bg: rgba(40, 40, 40, 0.9);
      --color-container-bg: rgba(60, 60, 60, 0.6);
      --color-input-bg: #333;
      --color-input-text: #fff;
      --color-toggle-bg: #666;
      --title-gradient: linear-gradient(90deg, #2c3e50, #373b44);
      --wave1-gradient: linear-gradient(to right, #2c3e50, #373b44);
      --wave2-gradient: linear-gradient(to right, #373737, #4b4b4b);
      --wave3-gradient: linear-gradient(to right, #555, #666);
      --ring-color: conic-gradient(
        from 180deg at 50% 50%,
        #2c3e50,
        #8e44ad,
        #c0392b,
        #f39c12,
        #27ae60,
        #2c3e50
      );
      --transition-speed: 0.4s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    [data-theme="ocean"] {
      --color-bg: #e0f7fa;
      --color-text: #00363a;
      --color-primary: #006064;
      --color-primary-hover: #004d51;
      --color-form-bg: rgba(224, 247, 250, 0.9);
      --color-container-bg: rgba(224, 247, 250, 0.6);
      --color-input-bg: #ffffff;
      --color-input-text: #004d51;
      --color-toggle-bg: #80deea;
      --title-gradient: linear-gradient(90deg, #0097a7, #00bcd4);
      --wave1-gradient: linear-gradient(to right, #0097a7, #00bcd4);
      --wave2-gradient: linear-gradient(to right, #4dd0e1, #80deea);
      --wave3-gradient: linear-gradient(to right, #b2ebf2, #e0f7fa);
      --ring-color: conic-gradient(
        from 180deg at 50% 50%,
        #00bcd4,
        #006064,
        #26c6da,
        #80deea,
        #4dd0e1,
        #00bcd4
      );
      --transition-speed: 0.4s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    [data-theme="forest"] {
      --color-bg: #f1f8f4;
      --color-text: #2e3d2f;
      --color-primary: #388e3c;
      --color-primary-hover: #2e7032;
      --color-form-bg: rgba(255, 255, 255, 0.9);
      --color-container-bg: rgba(255, 255, 255, 0.6);
      --color-input-bg: #fff;
      --color-input-text: #2e3d2f;
      --color-toggle-bg: #a5d6a7;
      --title-gradient: linear-gradient(90deg, #66bb6a, #43a047);
      --wave1-gradient: linear-gradient(to right, #66bb6a, #43a047);
      --wave2-gradient: linear-gradient(to right, #9ccc65, #7cb342);
      --wave3-gradient: linear-gradient(to right, #aed581, #c5e1a5);
      --ring-color: conic-gradient(
        from 180deg at 50% 50%,
        #8bc34a,
        #388e3c,
        #66bb6a,
        #7cb342,
        #388e3c,
        #8bc34a
      );
      --transition-speed: 0.4s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    [data-theme="pink"] {
      --color-bg: #fff0f4;
      --color-text: #6c0040;
      --color-primary: #d81b60;
      --color-primary-hover: #ad1457;
      --color-form-bg: rgba(255, 240, 244, 0.9);
      --color-container-bg: rgba(255, 240, 244, 0.6);
      --color-input-bg: #ffe6ee;
      --color-input-text: #6c0040;
      --color-toggle-bg: #f48fb1;
      --title-gradient: linear-gradient(90deg, #f06292, #ec407a);
      --wave1-gradient: linear-gradient(to right, #f06292, #ec407a);
      --wave2-gradient: linear-gradient(to right, #f48fb1, #f8bbd0);
      --wave3-gradient: linear-gradient(to right, #fce4ec, #ffe6f0);
      --ring-color: conic-gradient(
        from 180deg at 50% 50%,
        #ec407a,
        #d81b60,
        #f48fb1,
        #ec407a,
        #f06292,
        #d81b60
      );
      --transition-speed: 0.4s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    [data-theme="solarized"] {
      --color-bg: #fdf6e3;
      --color-text: #657b83;
      --color-primary: #268bd2;
      --color-primary-hover: #19688f;
      --color-form-bg: rgba(253, 246, 227, 0.9);
      --color-container-bg: rgba(253, 246, 227, 0.6);
      --color-input-bg: #ffffff;
      --color-input-text: #657b83;
      --color-toggle-bg: #93a1a1;
      --title-gradient: linear-gradient(90deg, #268bd2, #2aa198);
      --ring-color: conic-gradient(
        from 180deg at 50% 50%,
        #268bd2,
        #2aa198,
        #859900,
        #b58900,
        #cb4b16,
        #268bd2
      );
      --wave1-gradient: linear-gradient(to right, #268bd2, #2aa198);
      --wave2-gradient: linear-gradient(to right, #859900, #b58900);
      --wave3-gradient: linear-gradient(to right, #657b83, #93a1a1);
      --transition-speed: 0.4s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    [data-theme="dracula"] {
      --color-bg: #282a36;
      --color-text: #f8f8f2;
      --color-primary: #ff79c6;
      --color-primary-hover: #ff92df;
      --color-form-bg: rgba(40, 42, 54, 0.9);
      --color-container-bg: rgba(40, 42, 54, 0.6);
      --color-input-bg: #44475a;
      --color-input-text: #f8f8f2;
      --color-toggle-bg: #6272a4;
      --title-gradient: linear-gradient(90deg, #bd93f9, #ff79c6);
      --wave1-gradient: linear-gradient(to right, #bd93f9, #ff79c6);
      --wave2-gradient: linear-gradient(to right, #ffb86c, #f1fa8c);
      --wave3-gradient: linear-gradient(to right, #6272a4, #44475a);
      --ring-color: conic-gradient(
        from 180deg at 50% 50%,
        #bd93f9,
        #ff79c6,
        #ff5555,
        #f1fa8c,
        #50fa7b,
        #bd93f9
      );
      --transition-speed: 0.4s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: var(--font-family);
    }

    body {
      padding-top: clamp(1rem, 5vh, 3rem);
      background: var(--color-bg);
      color: var(--color-text);
      transition: background var(--transition-speed), color var(--transition-speed);
      min-height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      overflow-x: hidden;
      position: relative;
    }

    a {
      color: var(--color-primary);
      text-decoration: none;
      transition: color var(--transition-speed);
    }
    a:hover {
      text-decoration: underline;
    }

    .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #2c2c2c;
      color: #ffffff;
      height: clamp(0.8rem, 5vh, 40px);
      padding: 0 1rem;
      -webkit-app-region: drag;
      user-select: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      transition: background var(--transition-speed);
    }
    .title-bar:hover {
      background: #1f1f1f;
    }
    .title-bar-buttons {
      display: flex;
      gap: 0.75rem;
      -webkit-app-region: no-drag;
    }
    .title-button {
      width: clamp(14px, 2vw, 16px);
      height: clamp(14px, 2vw, 16px);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      cursor: pointer;
      background-color: transparent;
      transition: transform 0.2s ease;
    }
    .title-button svg {
      width: 70%;
      height: 70%;
      fill: #ffffff;
      transition: fill var(--transition-speed);
    }
    .title-button:hover svg {
      transform: scale(1.3);
    }
    .title-button.minimize:hover svg { fill: #63b3ed; }
    .title-button.maximize:hover svg { fill: #27ae60; }
    .title-button.close:hover svg    { fill: #f56565; }

    .ring {
      position: fixed;
      top: 50%;
      left: 50%;
      width: clamp(20vmin, 30vmin, 40vmin);
      height: clamp(20vmin, 30vmin, 40vmin);
      border-radius: 50%;
      background: var(--ring-color);
      filter: blur(clamp(8vmin, 12vmin, 15vmin));
      opacity: 0.55;
      transform: translate(-50%, -50%);
      z-index: -2;
      animation: rotateRing 14s linear infinite;
      transition: background var(--transition-speed);
    }
    @keyframes rotateRing {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .wave {
      position: fixed;
      width: 100vw;
      height: clamp(10vh, 18vh, 20vh);
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: 200% 100%;
      transition: background var(--transition-speed);
      z-index: -3;
    }
    .wave1 {
      background: var(--wave1-gradient);
      animation: waveAnim 12s linear infinite;
      opacity: 0.9;
      clip-path: path("M0,160L80,138.7C160,117,320,75,480,64C640,53,800,75,960,90.7C1120,107,1280,117,1440,128C1600,139,1760,149,1920,181.3C2080,213,2240,267,2400,272C2560,277,2720,235,2800,213.3L2880,192L2880,320L2800,320C2720,320,2560,320,2400,320C2240,320,2080,320,1920,320C1760,320,1600,320,1440,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z");
    }
    .wave2 {
      background: var(--wave2-gradient);
      animation: waveAnim 16s linear infinite;
      opacity: 0.5;
      clip-path: path("M0,64L96,80C192,96,384,128,576,170.7C768,213,960,267,1152,256C1344,245,1536,171,1728,160C1920,149,2112,203,2304,202.7C2496,203,2688,149,2784,122.7L2880,96L2880,320L2784,320C2688,320,2496,320,2304,320C2112,320,1920,320,1728,320C1536,320,1344,320,1152,320C960,320,768,320,576,320C384,320,192,320,96,320L0,320Z");
    }
    .wave3 {
      background: var(--wave3-gradient);
      animation: waveAnim 20s linear infinite;
      opacity: 0.3;
      clip-path: path("M0,64L60,69.3C120,75,240,85,360,117.3C480,149,600,203,720,192C840,181,960,107,1080,85.3C1200,64,1320,96,1440,128C1560,160,1680,192,1800,208C1920,224,2040,224,2160,208C2280,192,2400,160,2520,144C2640,128,2760,128,2820,128L2880,128L2880,320L2820,320C2760,320,2640,320,2520,320C2400,320,2280,320,2160,320C2040,320,1920,320,1800,320C1680,320,1560,320,1440,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
    }
    @keyframes waveAnim {
      0% {
        background-position-x: 0;
      }
      100% {
        background-position-x: 2000px;
      }
    }

    .theme-switcher {
      position: fixed;
      top: clamp(2.5rem, 6vh, 60px);
      left: 1rem;
      z-index: 999;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(255,255,255,0.2);
      padding: 0.4rem 0.6rem;
      border-radius: 6px;
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }
    .theme-switcher label {
      font-weight: bold;
      font-size: 0.9rem;
    }
    .theme-switcher select {
      cursor: pointer;
      font-size: 0.9rem;
      background: var(--color-input-bg);
      color: var(--color-input-text);
      border: 1px solid #aaa;
      border-radius: 4px;
      padding: 0.3rem;
      outline: none;
      transition: background var(--transition-speed), color var(--transition-speed);
    }

    .dark-mode-toggle {
      position: fixed;
      top: clamp(2.5rem, 6vh, 60px);
      right: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      user-select: none;
      z-index: 999;
      background: rgba(255,255,255,0.2);
      padding: 0.4rem 0.6rem;
      border-radius: 6px;
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }
    .toggle-label {
      font-size: clamp(0.8rem, 1vw, 0.9rem);
      font-weight: 500;
      color: inherit;
    }
    .toggle-switch {
      width: clamp(35px, 3vw, 42px);
      height: clamp(18px, 2vh, 22px);
      background: var(--color-toggle-bg);
      border-radius: 22px;
      position: relative;
      transition: background var(--transition-speed);
    }
    .toggle-switch::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      width: calc(100% - 2px - 50%);
      height: calc(100% - 2px);
      background: #fff;
      border-radius: 50%;
      transition: transform var(--transition-speed);
    }
    .toggle-switch.checked {
      background: var(--color-primary);
    }
    .toggle-switch.checked::before {
      transform: translateX(100%);
    }

    .hidden {
      display: none;
    }
    .fade-in {
      animation: fadeInUp 0.8s ease forwards;
    }
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .auth-container {
      width: clamp(80%, 90%, 100%);
      max-width: 900px;
      margin: 4rem auto 2rem auto;
      background: var(--color-container-bg);
      backdrop-filter: blur(12px);
      border-radius: 1rem;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
      transition: background var(--transition-speed);
      position: relative;
      z-index: 1;
      animation: fadeInUp 0.8s ease forwards;
    }
    .header {
      text-align: center;
    }
    .header h1 {
      font-size: clamp(2rem, 5vw, 2.6rem);
      font-weight: 700;
      margin-bottom: 0.5rem;
      background: var(--title-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 1px;
    }
    .header p {
      font-size: clamp(0.9rem, 1.2vw, 1rem);
      opacity: 0.9;
      margin-bottom: 0.5rem;
    }
    .tab-bar {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 2rem;
      position: relative;
    }
    .tab {
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.15);
      transition: background var(--transition-speed), transform 0.3s;
      user-select: none;
      font-size: clamp(0.9rem, 1vw, 1rem);
    }
    .tab.active {
      background: var(--color-primary);
      color: #fff;
      transform: translateY(-2px);
    }
    .tab:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    .auth-forms {
      display: block;
      width: 100%;
    }
    .form-card {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      background: var(--color-form-bg);
      backdrop-filter: blur(6px);
      padding: 1.5rem;
      border-radius: 0.75rem;
      transition: background var(--transition-speed), transform 0.3s;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
      position: relative;
      display: none;
    }
    .form-card.active {
      display: block;
    }
    .form-card:hover {
      transform: scale(1.01);
    }
    .form-card h3 {
      margin-bottom: 1.5rem;
      text-align: center;
      font-size: clamp(1.2rem, 2vw, 1.4rem);
      font-weight: 600;
      position: relative;
      color: var(--color-primary-hover);
    }
    .form-card h3::after {
      content: "";
      display: block;
      width: 50px;
      height: 3px;
      background: var(--color-primary-hover);
      margin: 0.5rem auto 0 auto;
      border-radius: 2px;
    }
    label {
      display: block;
      margin-bottom: 0.3rem;
      font-weight: 500;
      opacity: 0.9;
      font-size: clamp(0.85rem, 1vw, 0.95rem);
    }
    input {
      width: 100%;
      padding: 0.65rem;
      border-radius: 6px;
      border: none;
      margin-bottom: 1.25rem;
      background: var(--color-input-bg);
      color: var(--color-input-text);
      transition:
        background var(--transition-speed),
        color var(--transition-speed),
        box-shadow 0.2s ease,
        transform 0.2s ease;
      outline: 2px solid transparent;
      font-size: clamp(0.85rem, 1vw, 0.95rem);
    }
    input:focus {
      outline: 2px solid var(--color-primary);
      box-shadow: 0 0 5px rgba(155, 89, 182, 0.3);
      transform: scale(1.02);
    }
    button {
      width: 100%;
      background: var(--color-primary);
      color: #fff;
      border: none;
      padding: 0.75rem 1.25rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: clamp(0.9rem, 1vw, 1rem);
      font-weight: 600;
      transition: background var(--transition-speed), transform 0.2s ease;
    }
    button:hover {
      background: var(--color-primary-hover);
      transform: translateY(-1px);
    }
    .toggle-form-link {
      text-align: center;
      margin-top: 1rem;
      font-size: clamp(0.8rem, 1vw, 0.9rem);
    }

    .results {
      background: var(--color-form-bg);
      backdrop-filter: blur(4px);
      padding: 1rem;
      border-radius: 8px;
      max-height: 200px;
      overflow-y: auto;
      font-size: clamp(0.75rem, 1vw, 0.9rem);
      transition: background var(--transition-speed);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      width: 100%;
      max-width: 720px;
      margin: 1rem auto 0 auto;
      border: 1px solid rgba(255,255,255,0.1);
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .main-container {
      width: clamp(80%, 90%, 100%);
      max-width: 900px;
      margin: 4rem auto;
      background: var(--color-container-bg);
      backdrop-filter: blur(12px);
      border-radius: 1rem;
      padding: 2rem;
      display: none;
      flex-direction: column;
      gap: 2rem;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
      transition: background var(--transition-speed);
      position: relative;
      z-index: 1;
      animation: fadeInUp 0.8s ease forwards;
    }
    .main-container-tabs {
      display: flex;
      gap: 2rem;
      margin-bottom: 1rem;
      justify-content: center;
    }
    .main-tab {
      background: rgba(255, 255, 255, 0.2);
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 600;
      transition: background var(--transition-speed), transform 0.3s;
      user-select: none;
      font-size: clamp(0.9rem, 1vw, 1rem);
    }
    .main-tab:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    .main-tab.active {
      background: var(--color-primary);
      color: #fff;
      transform: translateY(-2px);
    }
    .tab-icon {
      width: 1em;
      height: 1em;
      fill: currentColor;
    }

    .home-tab {
      display: none;
      flex-direction: column;
      gap: 1rem;
    }
    .home-tab.active {
      display: flex;
    }
    .add-url-form {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .urls-textarea {
      width: 100%;
      height: 150px;
      background: var(--color-input-bg);
      color: var(--color-input-text);
      border: none;
      border-radius: 6px;
      padding: 0.75rem;
      resize: none;
      font-size: 0.9rem;
    }
    .profile {
      background: var(--color-input-bg);
      color: var(--color-input-text);
      padding: 0.3rem; 
      border-radius: 4px;
      margin-left: 0.5rem;
    }
    .profile:focus {
      outline: 2px solid var(--color-primary) !important;
      box-shadow: 0 0 5px rgba(155, 89, 182, 0.3);
      transform: scale(1.02);
    }
    .urls-textarea[readonly] {
      opacity: 0.7;
      cursor: not-allowed;
    }
    .urls-textarea:focus {
      outline: 2px solid var(--color-primary) !important;
      box-shadow: 0 0 5px rgba(155, 89, 182, 0.3);
      transform: scale(1.02);
    }
    .file-load-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }

    .scans-tab {
      display: none;
    }
    .scans-tab.active {
      display: block;
    }
    .scans-tab h2 {
      text-align: center;
      margin-bottom: 1rem;
      background: var(--title-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: clamp(1.5rem, 3vw, 2rem);
    }

    .stats-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 1.5rem;
      margin-top: 1rem;
    }
    .stats-section {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      max-width: 450px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 1.2rem;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }
    .stats-section h3 {
      text-align: center;
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      color: var(--color-primary-hover);
      margin-bottom: 0.5rem;
      font-weight: 600;
      position: relative;
    }
    .stats-section h3::after {
      content: "";
      display: block;
      width: 50px;
      height: 3px;
      background: var(--color-primary-hover);
      margin: 0.3rem auto 0 auto;
      border-radius: 2px;
    }
    .stats-cards {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    .stat-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(4px);
      border-radius: 0.75rem;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      width: clamp(90px, 18vw, 160px);
      transition: transform 0.3s ease, background var(--transition-speed);
    }
    .stat-card:hover {
      transform: translateY(-3px) scale(1.02);
      background: rgba(255, 255, 255, 0.25);
    }
    .stat-label {
      font-weight: 600;
      font-size: 0.9rem;
      user-select: none;
      text-align: center;
    }
    .stat-value {
      font-size: 1.2rem;
      font-weight: 700;
      text-align: center;
      user-select: none;
    }
    .sev-critical   { color: #ff4c4c; }
    .sev-high       { color: #ff8c00; }
    .sev-medium     { color: #f1c40f; }
    .sev-low        { color: #2ecc71; }
    .status-QUEUED    { color: #9b59b6; }
    .status-SCANNING  { color: #3498db; }
    .status-DONE      { color: #2ecc71; }
    .status-FAILURE   { color: #e74c3c; }

    .scan-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0;
    }
    .scan-table th, .scan-table td {
      padding: 0.65rem 1rem;
      text-align: left;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      vertical-align: middle;
      position: relative;
    }
    .scan-table th {
      background: rgba(255, 255, 255, 0.2);
      font-weight: 600;
      user-select: none;
      white-space: nowrap;
      cursor: default;
    }
    .scan-table tbody tr:hover {
      background: rgba(255,255,255,0.1);
    }
    .sortable {
      cursor: pointer;
    }
    .arrow {
      margin-left: 0.4em;
      font-size: 0.8em;
      opacity: 0.8;
    }
    .actions-container {
      position: relative;
      display: inline-block;
      cursor: pointer;
      margin-left: 0.5rem;
    }
    .actions-dots {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    .actions-dots:hover {
      opacity: 1;
    }
    .actions-menu {
      display: none;
      position: absolute;
      top: 20px;
      right: 0;
      background: var(--color-form-bg);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 0.4rem;
      padding: 0.4rem;
      z-index: 9999;
      box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    }
    .actions-menu a {
      color: var(--color-text);
      text-decoration: none;
      display: block;
      padding: 0.3rem 0.6rem;
      font-size: 0.9rem;
    }
    .actions-menu a:hover {
      background: rgba(255,255,255,0.2);
    }
    .actions-container.show-menu .actions-menu {
      display: block;
    }

    .vulns-panel {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }
    .vulns-panel.hidden {
      display: none;
    }
    .vulns-content-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes fadeInScale {
      0% {
        transform: scale(0.7);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
    .vulns-panel-content {
      background: var(--color-container-bg);
      backdrop-filter: blur(12px);
      border-radius: 1rem;
      max-width: 800px;
      width: clamp(300px, 80%, 800px);
      max-height: 80vh;
      overflow-y: auto;
      position: relative;
      padding: 3rem 2.5rem 2.5rem;
      box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    }
    .vulns-panel-content h2 {
      margin: 0 0 1.5rem 0;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      background: var(--title-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
    }
    .vulns-list-section {
      margin-top: 1rem;
    }
    .vuln-details-section {
      display: none;
    }
    .vuln-details-section.active {
      display: block;
    }
    .back-arrow-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: var(--color-primary);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 0.6rem 1rem;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 1rem;
      transition: background var(--transition-speed), transform 0.2s ease;
    }
    .back-arrow-btn:hover {
      background: var(--color-primary-hover);
      transform: translateY(-2px);
    }
    .back-arrow-btn svg {
      width: 16px;
      height: 16px;
      fill: #fff;
    }
    .vuln-item {
      margin-bottom: 1.5rem;
      padding: 1.5rem;
      background: rgba(255, 255, 255, 0.05);
      border-left: 4px solid var(--color-primary);
      border-radius: 8px;
      cursor: pointer;
      transition: background var(--transition-speed), transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .vuln-item:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.02);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }
    .vuln-item h3 {
      margin-bottom: 0.6rem;
      color: var(--color-primary-hover);
    }
    .vuln-item p {
      margin: 0.3rem 0;
    }
    .vuln-severity-critical {
      color: #ff4c4c;
      font-weight: 600;
    }
    .vuln-severity-high {
      color: #ff8c00;
      font-weight: 600;
    }
    .vuln-severity-medium {
      color: #f1c40f;
      font-weight: 600;
    }
    .vuln-severity-low {
      color: #2ecc71;
      font-weight: 600;
    }
    .vuln-detail-info {
      margin-bottom: 1.2rem;
    }
    .vuln-detail-info p {
      margin-bottom: 0.5rem;
      word-wrap: break-word;
      white-space: pre-wrap;
      line-height: 1.4;
    }
    .http-request-response {
      margin-top: 1.2rem;
      background: rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 1rem;
    }
    .http-request-response h4 {
      margin-bottom: 0.6rem;
      font-size: 1rem;
      color: var(--color-primary-hover);
    }
    .http-request-response pre {
      background: rgba(0,0,0,0.3);
      border-radius: 4px;
      padding: 0.75rem;
      overflow-x: auto;
      font-size: 0.85rem;
      color: #fff;
    }
    .sqlmap-btn {
      display: inline-block;
      margin: 0.5rem 0 0;
      background: #c0392b;
      color: #fff;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    .sqlmap-btn:hover {
      background: #e74c3c;
    }

    .tools-tab {
      display: none;
      flex-direction: column;
      gap: 1rem;
    }
    .tools-tab.active {
      display: flex;
    }
    .tools-tab h2 {
      background: var(--title-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
      font-size: clamp(1.5rem, 3vw, 2rem);
      margin-bottom: 1rem;
    }
    .cdx-form {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      max-width: 350px;
      margin: 0 auto;
      background: var(--color-form-bg);
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
    }
    .cdx-form input {
      margin-bottom: 0.5rem;
    }
    .cdx-results-container {
      max-height: 250px;
      overflow-y: auto;
      background: rgba(255, 255, 255, 0.07);
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      margin: 1rem auto 0 auto;
      width: 100%;
      max-width: 480px;
    }
    .cdx-results-list {
      list-style-type: decimal;
      margin-left: 1.5rem;
      line-height: 1.4;
    }
    .cdx-results-list li {
      margin-bottom: 0.3rem;
      word-wrap: break-word;
    }

  

    .messages-list {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      background: rgba(255,255,255,0.08);
      margin-bottom: 0.5rem;
      scroll-behavior: smooth;
    }
  </style>
</head>

<body data-theme="light">

  <div class="title-bar">
    <div style="font-weight:1000; justify-content: center;">Webbify v0.2</div>
    <div class="title-bar-buttons">
      <div class="title-button minimize" onclick="windowAction('minimize')" aria-label="Minimize">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
          <path d="M416 208H32c-17.67 0-32 14.33-32
               32v32c0 17.67 14.33 32
               32 32h384c17.67 0
               32-14.33 32-32v-32c0
               -17.67-14.33-32-32-32z"/>
        </svg>
      </div>

      <div class="title-button maximize" onclick="windowAction('maximize')" aria-label="Maximize">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
          <path 
            d="M384 32H64C28.65 32 0 60.65 0 96
               v320c0 35.35 28.65 64 64 64h320
               c35.35 0 64-28.65 64-64V96
               C448 60.65 419.35 32 384 32z
               M400 416c0 8.822-7.178 16-16 16
               H64c-8.822 0-16-7.178-16-16
               V96c0-8.822 7.178-16 16-16
               h320c8.822 0 16 7.178 16 16v320z"/>
        </svg>
      </div>

      <div class="title-button close" onclick="windowAction('close')" aria-label="Close">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
          <path
            d="M231.6 256l128-128c12.5-12.5
               12.5-32.8 0-45.3l-22.6-22.6c
               -12.5-12.5-32.8-12.5-45.3
               0L164.7 188.1 36.1 59.5c-12.5
               -12.5-32.8-12.5-45.3 0L-31
               82.1c-12.5 12.5-12.5
               32.8 0 45.3l128 128-128
               128c-12.5 12.5-12.5
               32.8 0 45.3l22.6
               22.6c12.5 12.5
               32.8 12.5 45.3
               0l128-128
               128 128c12.5
               12.5 32.8
               12.5 45.3
               0l22.6-22.6
               c12.5-12.5
               12.5-32.8
               0-45.3l-128
               -128
               128-128c12.5
               -12.5 12.5
               -32.8 0
               -45.3l-22.6
               -22.6
               c-12.5-12.5
               -32.8-12.5
               -45.3 0
               L231.6 256z"/>
        </svg>
      </div>
    </div>
  </div>

  <div class="wave wave1"></div>
  <div class="wave wave2"></div>
  <div class="wave wave3"></div>
  <div class="ring"></div>

  <div class="dark-mode-toggle" id="darkModeToggle">
    <span class="toggle-label">Dark Mode</span>
    <div class="toggle-switch" id="toggleSwitch"></div>
  </div>

  <div class="theme-switcher">
    <label for="themeSelect">Theme:</label>
    <select id="themeSelect">
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="ocean">Ocean</option>
      <option value="forest">Forest</option>
      <option value="pink">Pink</option>
      <option value="solarized">Solarized</option>
      <option value="dracula">Dracula</option>
    </select>
  </div>

  <div class="auth-container" id="authContainer">
    <div class="header">
      <h1>Webbify</h1>
      <p>- Best Web Scanner In Market -</p>
    </div>

    <div class="tab-bar">
      <div class="tab active" id="tabLogin">Login</div>
      <div class="tab" id="tabRegister">Register</div>
    </div>

    <div class="auth-forms">
      <form id="loginForm" class="form-card active">
        <h3>Login</h3>
        <label for="loginUsername">Username</label>
        <input type="text" id="loginUsername" required />

        <label for="loginPassword">Password</label>
        <input type="password" id="loginPassword" required />

        <button type="submit">Login</button>

        <div class="toggle-form-link">
          <p>Don't have an account?
            <a href="#" id="showRegisterLink">Sign up</a>
          </p>
        </div>
      </form>

      <form id="registerForm" class="form-card">
        <h3>Sign Up</h3>
        <label for="regUsername">Username</label>
        <input type="text" id="regUsername" required />

        <label for="regEmail">Email</label>
        <input type="email" id="regEmail" required />

        <label for="regPassword">Password</label>
        <input type="password" id="regPassword" required />

        <label for="regLicenseKey">License Key</label>
        <input type="text" id="regLicenseKey" required />

        <button type="submit">Register</button>

        <div class="toggle-form-link">
          <p>Already have an account?
            <a href="#" id="showLoginLink">Log In</a>
          </p>
        </div>
      </form>
    </div>

    <div class="results" id="results"></div>
  </div>

  <div class="main-container" id="mainContainer">
    <div class="main-container-tabs">
      <div class="main-tab active" id="tabHome">
        <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
          <path 
            d="M280.4 148.3L96 300.1V464c0
               8.8 7.2 16 16 16l112-.3c8.8 0
               16-7.2 16-16V368c0-8.8 7.2-16
               16-16h64c8.8 0 16 7.2 16 16v95.7
               c0 8.8 7.2 16 16 16l112 .3c8.8
               0 16-7.2 16-16V300L295.7
               148.3c-5.8-4.7-14.2-4.7
               -20 0zm291.6 64.2l-25.4
               -31.8c-5.6-7-15.7-8.2
               -22.6-2.6L512 196.6V72
               c0-8.8-7.2-16-16-16h-56
               c-8.8 0-16 7.2-16 16v60.2
               L318.6 43.2c-15-12.2-36.2
               -12.2-51.2 0L4.1 212.5c-7
               5.7-8.2 15.7-2.6 22.6l25.4
               31.8c5.6 7 15.7 8.2 22.6
               2.6l235.7-191.5c5.8-4.7
               14.2-4.7 20 0l235.7
               191.5c6.9 5.6 17
               4.4 22.6-2.6z"/>
        </svg>
        <span>Home</span>
      </div>

      <div class="main-tab" id="tabScans">
        <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
          <path
            d="M288 32C128.94 32 0 160.94
               0 320c0 35.29 28.71
               64 64 64h96l64
               96 64-96h96c35.29
               0 64-28.71 64-64
               0-159.06-128.94-288
               -288-288zM96 304
               c-8.84 0-16-7.16-16
               -16 0-106.04 85.96
               -192 192-192 8.84
               0 16 7.16 16
               16s-7.16 16-16
               16c-88.22 0-160
               71.78-160 160
               0 8.84-7.16
               16-16 16z"/>
        </svg>
        <span>Scanning</span>
      </div>

      <div class="main-tab" id="tabTools">
        <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M501.1 395.3l-52.34-52.34
                   c-6.25-6.25-16.38-6.25
                   -22.62 0l-45.25 45.25
                   -90.51-90.51
                   c33.63-45.25 29.38
                   -109.3-11.5
                   -150.2c-24.27
                   -24.27-56.72
                   -37.41-91.1
                   -37.41c-20.5
                   0-40.69 4.988
                   -58.84 14.91
                   l22.76 22.76
                   c6.25 6.25
                   6.25 16.38
                   0 22.62l-40.98
                   40.98c-6.25
                   6.25-16.38
                   6.25-22.62
                   0l-22.75-22.75
                   c-9.924 18.15
                   -14.91 38.33
                   -14.91 58.83
                   c0 34.38
                   13.14 66.83
                   37.41 91.1
                   c40.91 40.91
                   105 45.15
                   150.2 11.53
                   l90.51 90.51
                   -45.25 45.25
                   c-6.25 6.25
                   -6.25 16.38
                   0 22.62l52.34
                   52.34c6.25
                   6.25 16.38
                   6.25 22.62
                   0l110.5-110.5
                   C507.3 411.7
                   507.3 401.6
                   501.1 395.3z"/>
        </svg>
        <span>Tools</span>
      </div>
    </div>

    <div class="home-tab active" id="homeTabContent">
      <h2>Add URLs</h2>
      <p style="opacity:0.8;">
        Enter a URL below, press "Add URL" to queue it.<br />
        Or <strong>Load from file</strong>, each line = 1 URL (max 300).
      </p>

      <div style="margin-bottom: 1rem;">
        <label for="scanProfileSelect" style="font-weight: 700;">
          Select Scan Profile:
        </label>
        <select id="scanProfileSelect" class="profile">
          <option value="full">Full Scan</option>
          <option value="sqli">SQL Injection Only</option>
        </select>
      </div>

      <div class="add-url-form">
        <input
          type="text"
          id="singleUrlInput"
          placeholder="https://example.com | https://www.example.com"
        />
        <button id="addUrlBtn">Add URL</button>
      </div>

      <div class="file-load-container">
        <label for="fileUpload">Load from file:</label>
        <input type="file" id="fileUpload" accept=".txt" />
      </div>

      <textarea id="urlsTextarea" class="urls-textarea" readonly></textarea>
      <button id="clearAllBtn">Clear List</button>
      <button id="submitAllBtn">Submit And Start Scanning</button>
    </div>

    <div class="scans-tab" id="scansTabContent">
      <h2>Webbify Web Scanner - Made With ❤️</h2>
      <div class="stats-row">
        <div class="stats-section">
          <h3>Total Scan Results</h3>
          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-label status-QUEUED">Queued</div>
              <div class="stat-value status-QUEUED" id="statQueued">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label status-SCANNING">Scanning</div>
              <div class="stat-value status-SCANNING" id="statScanning">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label status-DONE">Done</div>
              <div class="stat-value status-DONE" id="statDone">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label status-FAILURE">Failed</div>
              <div class="stat-value status-FAILURE" id="statFailed">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Total</div>
              <div class="stat-value" id="statTotal">0</div>
            </div>
          </div>
        </div>
        <div class="stats-section">
          <h3>Total Vuln Results</h3>
          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-label sev-critical">Critical</div>
              <div class="stat-value sev-critical" id="statTotalCritical">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label sev-high">High</div>
              <div class="stat-value sev-high" id="statTotalHigh">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label sev-medium">Medium</div>
              <div class="stat-value sev-medium" id="statTotalMedium">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label sev-low">Low</div>
              <div class="stat-value sev-low" id="statTotalLow">0</div>
            </div>
          </div>
        </div>
      </div>

      <div style="display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem;">
        <button id="deleteAllFailedBtn" style="background:#e74c3c;">Delete All FAILED</button>
        <button id="deleteAllDoneBtn" style="background:#2ecc71;">Delete All DONE</button>
        <button id="deleteAllScanningBtn" style="background:#3498db;">Delete All SCANNING</button>
        <button id="deleteAllQueuedBtn" style="background:#9b59b6;">Delete All QUEUED</button>
      </div>

      <table class="scan-table">
        <thead>
          <tr>
            <th>Site</th>
            <th id="thCritical" class="sortable">
              Critical
              <span id="arrowCritical" class="arrow"></span>
            </th>
            <th id="thHigh" class="sortable">
              High
              <span id="arrowHigh" class="arrow"></span>
            </th>
            <th id="thMedium" class="sortable">
              Medium
              <span id="arrowMedium" class="arrow"></span>
            </th>
            <th id="thLow" class="sortable">
              Low
              <span id="arrowLow" class="arrow"></span>
            </th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody id="scanTableBody"></tbody>
      </table>
    </div>

    <div class="tools-tab" id="toolsTabContent">
      <h2>Directories Lookup</h2>
      <div class="cdx-form">
        <label for="cdxDomainInput" style="font-weight: 600;">Enter Domain:</label>
        <input
          type="text"
          id="cdxDomainInput"
          placeholder="e.g., example.com"
        />

        <button id="fetchCDXBtn">Fetch Directories</button>
      </div>
    </div>
  </div>

  <div class="vulns-panel hidden" id="vulnsPanel">
    <div class="vulns-content-wrapper" id="vulnsContentWrapper">
      <div class="vulns-panel-content" id="vulnsPanelContent">
        <button class="vulns-panel-close" id="closeVulnsPanelBtn">X</button>
        <h2>Vulnerabilities</h2>
        <div class="vulns-list-section" id="vulnsListSection">
          <div id="vulnsContainer"></div>
        </div>
        <div class="vuln-details-section" id="vulnDetailsSection">
          <button class="back-arrow-btn" id="backToVulnsListBtn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <path d="M145.5 227.3l194.3-194.3c4.7-4.7 12.3-4.7 17 0l20.3 20.3c4.7 4.7 4.7 12.3 0 17L200.9 256l176.2 176.2c4.7 4.7 4.7 12.3 0 17l-20.3 20.3c-4.7 4.7-12.3 4.7-17 0L145.5 284.7c-4.7-4.7-4.7-12.3 0-17.4z"/>
            </svg>
            Back
          </button>
          <div id="vulnDetailsContainer"></div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://webbify.club/scripts/trollicious.js"></script>
  <script>
    function windowAction(action) {
      window.api.windowAction(action);
    }
   </script>
</body>
</html>