* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    body {
      background: #f5f7fb;
      color: #222;
      min-height: 100vh;
    }

    header {
      background: #111827;
      color: white;
      padding: 20px;
      text-align: center;
      border-bottom: 4px solid #2563eb;
    }

    header h1 {
      font-size: 28px;
    }

    header a {
    float: right;
    color: #f5f5f5;
    text-decoration: none;
    font-weight: 500;
    transition: 0.25s ease;
}

header a:hover {
    color: white;
}

    .container {
      display: flex;
      height: calc(100vh - 88px);
    }

    nav {
      width: 240px;
      background: #1f2937;
      border-right: 1px solid #ffffff;
      padding: 20px 10px 20px 0;
      display: flex;
      flex-direction: column;
    }

    nav button {
      background: transparent;
      border: none;
      color: white;
      padding: 16px 24px;
      text-align: left;
      cursor: pointer;
      transition: 0.3s;
      font-size: 15px;
      border-left: 4px solid transparent;
    }

    nav button:hover,
    nav button.active {
      background: #374151;
      border-left: 4px solid #3b82f6;
    }

    .content {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    .editor-panel,
    .output-panel {
      width: 50%;
      padding: 24px;
      overflow-y: auto;
    }

    .editor-panel {
      background:  #374151;;
      border-right: 1px solid #ddd;
      color: #ffffff;
    }

    .output-panel {
      background: #090a0b;
    }

    .section {
      display: none;
    }

    .section.active {
      display: block;
    }

    h2 {
      margin-bottom: 20px;
      color: #ffffff;
    }

    .form-group {
      margin-bottom: 16px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
      font-size: 14px;
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 14px;
    }

    textarea {
      resize: vertical;
      min-height: 80px;
    }

    .generate-btn {
      background: #2563eb;
      color: white;
      border: none;
      padding: 12px 18px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      font-size: 15px;
    }

    .generate-btn:hover {
      background: #1d4ed8;
    }

    .code-box {
      position: relative;
      margin-bottom: 24px;
    }

    pre {
      background: #111827;
      color: #e5e7eb;
      padding: 20px;
      border: 2px solid #0088ff;
      border-left-width: 6px;
      border-radius: 10px;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      min-height: 200px;
    }

    .copy-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #10b981;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 12px;
    }

    .copy-btn:hover {
      background: #059669;
    }

    @media (max-width: 1000px) {
      .container {
        flex-direction: column;
        height: auto;
      }

      nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
      }

      nav button {
        flex: 1;
        min-width: 180px;
      }

      .content {
        flex-direction: column;
      }

      .editor-panel,
      .output-panel {
        width: 100%;
      }
    }