:root {
   --cor-primaria: #1e3d59;
   --cor-secundaria: #f5f0e1;
   --cor-destaque: #ff6e40;
   --cor-sucesso: #2ecc71;
   --cor-erro: #e74c3c;
 }

 body {
   margin: 0;
   font-family: "Segoe UI", Arial, sans-serif;
   background: var(--cor-secundaria);
   color: var(--cor-primaria);
 }

 body {
   margin: 0;
   font-family: "Segoe UI", Arial, sans-serif;
   background: var(--cor-secundaria);
   color: var(--cor-primaria);
 }

 header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--cor-primaria);
   color: white;
   padding: 20px;
   text-align: center;
 }

 header h1 {
   margin: 0;
   font-size: 22px;
 }

 header .logo-marca {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
 }

 header .logo-marca img {
   height: 40px;
 }
.right-head{
  display: flex;
  gap: 15px;
}
.right-head a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  /* background: var(--cor-destaque);   */
  transition: background 0.3s;
}
.right-head a:hover {  background: #e85c2f; } 
 main {
   max-width: 900px;
   margin: 40px auto;
   padding: 20px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 h2 {
   border-left: 5px solid var(--cor-destaque);
   padding-left: 10px;
 }

 table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 20px;
 }

 table th,
 table td {
   border: 1px solid #ccc;
   padding: 10px;
   text-align: left;
 }

 table th {
   background: var(--cor-primaria);
   color: white;
 }

 .saldo {
   font-size: 1.5em;
   color: var(--cor-destaque);
   font-weight: bold;
 }

 .logout {
   text-align: right;
 }

 .logout a {
   background: var(--cor-destaque);
   color: white;
   padding: 10px 15px;
   border-radius: 6px;
   text-decoration: none;
 }

 .logout a:hover {
   background: #e85c2f;
 }

 nav {
   background: var(--cor-secundaria);
   border-bottom: 4px solid var(--cor-primaria);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 20px;
   flex-wrap: wrap;
 }

 nav .logo {
   font-weight: bold;
   color: var(--cor-primaria);
   font-size: 1.2em;
 }

 nav ul {
   list-style: none;
   display: flex;
   gap: 20px;
   margin: 0;
   padding: 0;
 }

 nav ul li a {
   color: var(--cor-primaria);
   text-decoration: none;
   font-weight: 500;
 }

 nav ul li a:hover {
   color: var(--cor-destaque);
 }

 .menu-toggle {
   display: none;
   font-size: 1.5em;
   color: var(--cor-primaria);
   cursor: pointer;
 }

 .info-acount {
   background: var(--cor-primaria);
   color: white;
   padding: 20px;
   border-radius: 8px;
 }

 .info-acount h2 {
   margin-top: 0;
   margin-bottom: 10px;
 }

 .info-acount p {
   margin: 5px 0;
 }

 /* Formulário de contacto */
 .contacto {
   display: flex;
   flex-direction: row;
   gap: 40px;
   flex-wrap: wrap;
 }

 .contact-cover {
   flex: 1;
   min-width: 280px;
   background: var(--cor-primaria);
   color: white;
   padding: 20px;
   border-radius: 8px;
 }
.contact-cover img {
   width: 100%;
   max-width: 300px;
   display: block;
   margin: 20px auto;
 }
 .contact-form {
   flex: 1;
   min-width: 280px;
   background: white;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
.form-regist{
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 480px;
  margin: 20px auto;
}
 form {
   display: flex;
   flex-direction: column;
   margin-top: 20px;
 }

 form label {
   font-weight: bold;
 }

 form input,
 form textarea {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 6px;
   font-size: 1em;
   margin-bottom: 10px;
 }

 form button {
   background: var(--cor-destaque);
   color: white;
   border: none;
   padding: 12px;
   border-radius: 6px;
   font-size: 1em;
   cursor: pointer;
   transition: background 0.3s;
 }

 form button:hover {
   background: #e85c2f;
 }
code {
      background: #eee;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: Consolas, monospace;
    }

    .success {
      color: var(--cor-sucesso);
      font-weight: bold;
    }

    .error {
      color: var(--cor-erro);
      font-weight: bold;
    }


    ul {
      list-style: none;
      padding: 0;
      text-align: left;
    }
    li {
      margin: 8px 0;
    }
    
    pre {
      background: #000000;
      padding: 12px;
      border-radius: 6px;
      overflow-x: auto;
      font-size: 0.95em;
      color: #47bf94
    }
    .pie {
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: conic-gradient(
        #ff9800 0% 3.5%,      /* Plataforma */
        #f44336 3.5% 6.5%,   /* Provedora */
        #4caf50 6.5% 100%    /* Dev */
      );
      margin: 30px auto;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    .legenda {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }
    .legenda div {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cor {
      width: 20px;
      height: 20px;
      border-radius: 4px;
    }
    .plataforma { background: #ff9800; }
    .provedora { background: #f44336; }
    .dev { background: #4caf50; }
    
 footer {
   text-align: center;
   padding: 20px;
   background: var(--cor-primaria);
   color: white;
   margin-top: 40px;
 }

 @media (max-width: 768px) {
   nav ul {
     flex-direction: column;
     width: 100%;
     display: none;
   }

   nav ul.active {
     display: flex;
   }

   .menu-toggle {
     display: block;
   }
 }