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

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

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

      .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;
      }

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

      h1 {
        color: #b39ddb;
        margin-bottom: 20px;
        text-align: center;
        font-size: 1.8rem;
        text-decoration: underline;
      }

      #historicoPedidos {
        list-style: none;
        padding: 0;
        width: 100%;
        max-width: 600px;
      }

      #historicoPedidos li {
        background-color: var(--roxo-medio);
        margin-bottom: 12px;
        padding: 15px 20px;
        border-radius: 8px;
        box-shadow: 0 0 8px #340b49;
        font-size: 1rem;
        white-space: pre-line;
      }

      #btnLimpar {
        margin-top: 20px;
        background-color: #7e57c2;
        color: white;
        border: none;
        padding: 12px 25px;
        font-size: 1rem;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

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

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

      /* RESPONSIVO */
      @media (max-width: 768px) {
        body {
          flex-direction: column;
          align-items: center;
        }

        .sidebar {
          display: none;
        }

        .topnav {
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color: var(--roxo-medio);
          padding: 15px 10px;
          width: 100%;
          gap: 10px;
        }

        .topnav h5 {
          font-size: 1.2rem;
          margin-bottom: 5px;
        }

        .topnav .nav-links {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          justify-content: center;
        }

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

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