:root {
        --roxo-escuro: #1a1a2e;
        --roxo-medio: #2a003f;
        --roxo-claro: #d1c4e9;
        --roxo-hover: #5e35b1;
      }

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

      body {
        font-family: Arial, sans-serif;
        background-color: var(--roxo-escuro);
        color: var(--roxo-claro);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .container {
        display: flex;
        flex: 1;
        flex-direction: row;
      }

      .sidebar {
        background-color: var(--roxo-medio);
        padding: 20px;
        width: 220px;
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

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

      .sidebar a:hover {
        background-color: #62237f;
      }

      .topnav {
        display: none;
      }

      header,
      footer {
        color: var(--roxo-claro);
        padding: 10px;
        text-align: center;
      }

      .topo {
        font-size: 24px;
        font-weight: bold;
      }

      main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      .form-section {
        background-color: var(--roxo-medio);
        padding: 30px 40px;
        border-radius: 12px;
        box-shadow: 0 0 15px #340b49;
        width: 100%;
        max-width: 400px;
      }

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

      label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
      }

      input[type="number"] {
        width: 100%;
        padding: 10px;
        font-size: 1.1rem;
        border-radius: 6px;
        border: none;
        margin-bottom: 20px;
      }

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

      button:disabled {
        background-color: #9575cd88;
        cursor: not-allowed;
      }

      button:hover:not(:disabled) {
        background-color: var(--roxo-hover);
      }

      .inputValor {
        background-color: #3c2563;
        color: var(--roxo-claro);
        border: 1px solid #340b49;
        font-size: 1.1rem;
      }

      #mensagem {
        margin-top: 15px;
        font-weight: bold;
        text-align: center;
        color: #a5d6a7;
      }

      footer {
        text-align: center;
        padding: 10px;
        background-color: transparent;
        font-size: 0.9rem;
      }

      /* RESPONSIVO */
      @media (max-width: 1024px) {
        .form-section {
          width: 90%;
        }

        .sidebar {
          width: 200px;
        }
      }

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

        .sidebar {
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          padding: 10px;
          background-color: var(--roxo-medio);
          gap: 10px;
        }

        .sidebar h2 {
          width: 100%;
          text-align: center;
          font-size: 1.4rem;
          margin-bottom: 10px;
        }

        .sidebar a {
          margin: 5px;
          font-size: 0.9rem;
          padding: 10px;
          border-radius: 5px;
        }

        .topnav {
          display: none;
        }

        .form-section {
          padding: 25px 20px;
          width: 100%;
        }

        h1.titulo {
          font-size: 1.4rem;
          text-align: center;
          padding: 10px;
        }

        footer {
          background-color: var(--roxo-medio);
          padding: 10px;
        }
      }