body {
        font-family: Arial, sans-serif;
        background-color: #1a1a2e;
        color: #d1c4e9;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        padding: 0;
      }

      header {
        text-align: center;
        padding: 15px 0;
        color: #d1c4e9;
        display: flex;
        justify-content: center;
        margin-left: 200px;
      }

      nav.sidebar {
        width: 240px;
        background-color: #2a003f;
        padding: 20px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      nav.sidebar h1 {
        font-size: 1.5rem;
        margin-bottom: 20px;
        background-color: #3a0055;
        border-radius: 50px;
        color: var(--roxo-claro, #d1c4e9);
      }

      nav.sidebar a {
        text-decoration: none;
        color: var(--roxo-claro, #d1c4e9);
        font-size: 1rem;
        padding: 10px;
        border: 1px solid #340b49;
        border-radius: 5px;
        transition: background 0.3s;
      }

      nav.sidebar a:hover {
        background-color: #3a0055;
      }

      main {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        margin-left: 190px;
      }

      .resultado {
        background-color: #2a003f;
        padding: 30px 40px;
        border-radius: 12px;
        box-shadow: 0 0 15px #3a0055;
        width: 100%;
        max-width: 400px;
        text-align: center;
        margin: 0 auto;
      }

      h2 {
        margin-top: 0;
        color: #b39ddb;
        margin-bottom: 20px;
      }

      button {
        width: 100%;
        padding: 12px;
        font-size: 1.2rem;
        background-color: #410261;
        border: none;
        border-radius: 8px;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-bottom: 20px;
      }

      button:hover {
        background-color: #3a0055;
      }

      input {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        margin-bottom: 10px;
        border-radius: 5px;
        border: none;
        font-size: 1rem;
        background-color: var(--roxo-input, #3a0055);
        color: var(--roxo-claro, #d1c4e9);
      }

      #fechamento {
        background-color: #410261;
        padding: 15px 20px;
        border-radius: 10px;
        white-space: pre-wrap;
        font-family: monospace;
        font-size: 1.1rem;
        color: #d1c4e9;
        display: none;
        text-align: left;
      }

      footer {
        text-align: center;
        padding: 15px 0;
        color: #d1c4e9;
        margin-left: 200px;
      }

      /* ---------- RESPONSIVIDADE ---------- */
      @media (max-width: 768px) {
        header {
          margin-left: 0; /* Remove o recuo lateral no celular */
          text-align: center;
        }
        nav.sidebar {
          position: relative;
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          padding: 10px;
        }

        .nome {
          display: none;
        }

        nav.sidebar h1 {
          width: 100%;
          text-align: center;
          margin-bottom: 10px;
        }

        nav.sidebar a {
          margin: 5px;
          font-size: 0.9rem;
        }

        main {
          margin-left: 0;
          padding: 20px 10px;
        }

        .resultado {
          max-width: 100%;
          padding: 20px;
        }

        button {
          font-size: 1rem;
        }

        footer {
          margin-left: 0;
          background-color: #2a003f;
        }
      }