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

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Courier New', monospace;
  background: linear-gradient(135deg, #000000, #101010, #1a1a1a, #0a0a0a);
  background-size: 600% 600%;
  animation: multiDirectionGradient 15s ease infinite;
  color: #eaeaea;
  overflow-x: hidden;
}

@keyframes multiDirectionGradient {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 0%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
    
    .main {
      height: 100%;
      width: 100%;
      padding: 40px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

    h1 {
      font-weight: 500;
      font-size: 24px;
      margin-bottom: 12px;
    }

    p {
      font-size: 14px;
      margin-bottom: 20px;
      color: #c1c1c1;
      max-width: 700px;
      text-align: center;
    }

    input {
      width: 90%;
      max-width: 500px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.06);
      color: white;
      border: none;
      border-radius: 10px;
      margin-bottom: 15px;
      font-size: 14px;
    }

    input:focus {
      outline: 2px solid #666;
      outline-offset: 2px;
    }

    button {
      width: 90%;
      max-width: 500px;
      padding: 12px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(to right, #333, #1c1c1c);
      color: white;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.3s;
      position: relative;
    }

    button:hover {
      background: linear-gradient(to right, #444, #262626);
    }

    button:focus {
      outline: 2px solid #666;
      outline-offset: 2px;
    }

    button.loading::after {
      content: " ";
      position: absolute;
      right: 10px;
      width: 16px;
      height: 16px;
      border: 2px solid #fff;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .terminal {
      margin-top: 30px;
      background: rgba(0, 0, 0, 0.45);
      border-radius: 14px;
      padding: 20px;
      font-size: 13px;
      line-height: 1.6;
      height: 300px;
      width: 90%;
      max-width: 800px;
      overflow-y: auto;
      white-space: pre-wrap;
      color: #eaeaea;
    }

    .log-info { color: #7dd3fc; }
    .log-warning { color: #fde047; }
    .log-error { color: #f87171; }
    .log-success { color: #86efac; }

    .link-simulacao {
      margin-top: 20px;
      font-size: 13px;
      color: #aaa;
      word-break: break-all;
      text-align: center;
    }

.progress-bar {
  width: 90%;
  max-width: 500px;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  margin: 10px 0;
  overflow: hidden;
}

.progress {
  width: 0%;
  height: 100%;
  background: rgba(110, 110, 110, 0.6);
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
}
    footer {
  margin-top: auto;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #888;
  width: 100%;
}

footer p {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

footer a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #aaa;
  text-decoration: none;
  transition: color 0.3s;
}

footer a:hover {
  color: #fff;
}

    footer a:hover {
      color: #fff;
    }

    @media (max-width: 600px) {
      .terminal {
        height: 240px;
        font-size: 12px;
      }
      }