:root {
      --primary-color: #ff0050;
      --secondary-color: #4CAF50;
      --password-color: #3a86ff;
      --text-color: #333;
      --light-gray: #f5f5f5;
      --medium-gray: #ddd;
      --dark-gray: #666;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color: var(--text-color);
      background-image: url('https://raw.githubusercontent.com/IIHUII/Luna-passowrd-username-site/refs/heads/main/picis/sky.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }

    .container {
      background-color: rgba(255, 255, 255, 0.97);
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      padding: 25px;
      width: 90%;
      max-width: 650px;
      text-align: center;
      backdrop-filter: blur(8px);
    }

    h1 {
      color: var(--primary-color);
      margin-bottom: 10px;
      font-size: 26px;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .subtitle {
      color: var(--dark-gray);
      margin-bottom: 20px;
      font-size: 14px;
    }

    .tab-buttons {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      gap: 10px;
    }

    .tab-btn {
      background: none;
      border: none;
      padding: 10px 20px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s;
      color: var(--text-color);
    }

    .tab-btn.active {
      background-color: var(--primary-color);
      color: white;
      box-shadow: 0 4px 8px rgba(255, 0, 80, 0.2);
    }

    .tab-btn.password-tab.active {
      background-color: var(--password-color);
      box-shadow: 0 4px 8px rgba(58, 134, 255, 0.2);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .control-group {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 15px;
      flex-wrap: wrap;
    }

    .platform-selector,
    .style-selector {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    .platform-btn,
    .style-btn {
      background: none;
      border: 2px solid var(--medium-gray);
      padding: 7px 14px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      min-width: 85px;
      font-size: 13px;
      color: var(--text-color);
    }

    .platform-btn:hover,
    .style-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .platform-btn.active {
      border-color: var(--primary-color);
      color: var(--primary-color);
      background-color: rgba(255, 0, 80, 0.1);
      box-shadow: 0 2px 5px rgba(255, 0, 80, 0.2);
    }

    .style-btn.active {
      border-color: var(--secondary-color);
      color: var(--secondary-color);
      background-color: rgba(76, 175, 80, 0.1);
      box-shadow: 0 2px 5px rgba(76, 175, 80, 0.2);
    }

    select {
      padding: 9px 14px;
      border-radius: 20px;
      border: 2px solid var(--medium-gray);
      font-size: 13px;
      background-color: white;
      cursor: pointer;
      min-width: 130px;
      transition: all 0.3s;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 15px;
    }

    select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(255, 0, 80, 0.2);
    }

    button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 25px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 8px rgba(255, 0, 80, 0.2);
    }

    .password-btn {
      background-color: var(--password-color);
      box-shadow: 0 4px 8px rgba(58, 134, 255, 0.2);
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(255, 0, 80, 0.3);
    }

    .password-btn:hover {
      box-shadow: 0 6px 12px rgba(58, 134, 255, 0.3);
    }

    button:active {
      transform: translateY(0);
    }

    .results-container {
      max-height: 350px;
      overflow-y: auto;
      margin-top: 20px;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 10px;
      border: 1px solid var(--medium-gray);
      scrollbar-width: thin;
      scrollbar-color: var(--primary-color) var(--light-gray);
    }

    .password-results {
      scrollbar-color: var(--password-color) var(--light-gray);
    }

    .results-container::-webkit-scrollbar {
      width: 8px;
    }

    .results-container::-webkit-scrollbar-track {
      background: var(--light-gray);
      border-radius: 10px;
    }

    .results-container::-webkit-scrollbar-thumb {
      background-color: var(--primary-color);
      border-radius: 10px;
    }

    .password-results::-webkit-scrollbar-thumb {
      background-color: var(--password-color);
    }

    .results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px;
    }

    .password-results .results {
      grid-template-columns: 1fr;
    }

    .username,
    .password {
      padding: 8px;
      background-color: white;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      border: 1px solid var(--medium-gray);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .username {
      font-family: 'Courier New', monospace;
      font-size: 13px;
    }

    .password {
      font-family: 'Courier New', monospace;
      font-size: 14px;
      letter-spacing: 1px;
    }

    .username:hover,
    .password:hover {
      background-color: var(--light-gray);
      transform: scale(1.03);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    .username:hover {
      border-color: var(--primary-color);
    }

    .password:hover {
      border-color: var(--password-color);
    }

    .copied-message {
      color: var(--primary-color);
      font-size: 13px;
      margin-top: 12px;
      font-weight: 600;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .password-copied {
      color: var(--password-color);
    }

    .copied-message.show {
      opacity: 1;
    }

    .loading {
      display: none;
      margin: 20px 0;
    }

    .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top: 4px solid var(--primary-color);
      width: 25px;
      height: 25px;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 10px;
    }

    .password-spinner {
      border-top-color: var(--password-color);
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .loading-text {
      font-size: 14px;
      color: var(--dark-gray);
    }

    .stats {
      font-size: 13px;
      color: var(--dark-gray);
      margin-top: 10px;
      font-weight: 500;
    }

    .platform-icon {
      margin-right: 5px;
      font-size: 14px;
    }

    @media (max-width: 500px) {
      .container {
        padding: 20px 15px;
      }

      .control-group {
        flex-direction: column;
        align-items: center;
      }

      select,
      button {
        width: 100%;
        max-width: 250px;
      }

      .results {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      }
    }