.config-box-layout {
      margin-left: 230px;
      padding: 20px;
      height: 520px;
      width: 1000px;
    }

    .config-box {
      display: flex;
      width: 1050px;
      min-height: 400px;
      overflow: hidden;
      background: rgba(20, 20, 20, 0.582);
      backdrop-filter: blur(8px);
      border: 1px solid #2a2a2a;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0,0,0,0.7);
    }

    .form-container {
      max-width: 700px;
      margin: 100px auto;
      padding: 20px;
      background: rgba(20, 20, 20, 0.582);
      backdrop-filter: blur(8px);
      border: 1px solid #2a2a2a;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0,0,0,0.7);
      color: #fff;
    }

    .form-container h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    /* Tabs */
    .config-tabs {
      display: flex;
      gap: 5px;
      margin-bottom: 30px;
      border-bottom: 1px solid #2a2a2a;
    }

    .tab-button {
      background: none;
      border: none;
      padding: 15px 25px;
      color: #8d8d8d;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-bottom: 3px solid transparent;
    }

    .tab-button:hover {
      color: #fafafa;
      background: #4a90e21a;
    }

    .tab-button.active {
      color: #4A90E2;
      border-bottom-color: #4A90E2;
      background: #4A90E2;
background: linear-gradient(0deg, rgba(74, 144, 226, 0.79) 8%, rgba(74, 144, 226, 0) 86%);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .form-section {
      margin-bottom: 30px;
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #2a2a2a;
    }

    .section-header h3 {
      font-size: 18px;
      color: #fafafa;
    }

    .section-header i {
      color: #4A90E2;
    }

    .form-grid {
      display: grid;
      gap: 20px;
    }

    .form-grid.two-column {
      grid-template-columns: 1fr 1fr;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-group label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      display: flex;
      align-items: center;
      background: #474747;
      border-radius: 8px;
      border: 1px solid #363636;
      box-shadow: inset 0 8px 8px -7px rgba(0, 0, 0, 0.644);
      color: #dbdbdb;
      padding: 10px 15px;
      font-size: 16px;
      outline: none;
      width: 100%;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: #4A90E2;
      box-shadow: 0 0 10px rgba(74, 144, 226, 0.6);
      background: #3a3a3a;
    }

    .form-group textarea {
      resize: none;
      min-height: 80px;
    }

    .char-counter {
      text-align: right;
      font-size: 12px;
      color: #8d8d8d;
      margin-top: 5px;
    }

    .char-counter.warning {
      color: #d29922;
    }

    .char-counter.danger {
      color: #f85149;
    }

    .submit-btn {
      background-color: #4A90E2;
      padding: 12px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      width: 100%;
      color: white;
    }

    .submit-btn:hover {
      background-color: #357ABD;
    }

    textarea::-webkit-scrollbar {
      width: 10px;
    }

    textarea::-webkit-scrollbar-track {
      background: transparent;
    }

    textarea::-webkit-scrollbar-thumb {
      background: rgba(74, 144, 226, 0.6);
      border-radius: 10px;
      border: 3px solid transparent;
      background-clip: content-box;
    }

    textarea::-webkit-scrollbar-thumb:hover {
      background: rgba(74, 144, 226, 0.9);
    }

    footer {
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid #2a2a2a;
      text-align: center;
    }

    footer a {
      color: #8d8d8d;
      text-decoration: none;
      margin: 0 10px;
    }

    footer a:hover {
      color: #4A90E2;
    }

    footer p {
      margin-top: 10px;
      color: #8d8d8d;
      font-size: 14px;
    }

    /* MEDIA QUERIES PARA RESPONSIVIDADE */

    /* Tablets */
    @media (max-width: 1024px) {
      .sidebar {
        width: 180px;
      }
      
      .config-box-layout {
        margin-left: 180px;
        padding: 20px;
      }
      
      .logo {
        font-size: 24px;
      }
      
      .search-box input {
        width: 200px;
      }

      .form-grid.two-column {
        grid-template-columns: 1fr;
      }
    }

    /* Mobile */
    @media (max-width: 768px) {
      body {
        margin-bottom: 70px;
      }
      
      .sidebar {
        display: none;
      }
      
      .navbar-bottom {
        display: block;
      }
      
      .config-box-layout {
        margin-left: 0;
        padding: 15px;
        width: auto;
        height: auto;
      }
      
      nav {
        padding: 8px 15px;
      }
      
      .logo {
        font-size: 20px;
      }
      
      .logo_area {
        padding-right: 15px;
        padding-left: 10px;
      }
      
      .search-box {
        margin-left: 5px;
        margin-right: 5px;
      }
      
      .search-box input {
        width: 150px;
        font-size: 14px;
      }

      .marquee-container {
        display: none;
        visibility: hidden;
      }

      .marquee {
        display: none;
      }

      .last-update p{
        display: none;
      }

      .last-update {
        display: none;
      }

      .form-container {
        margin: 80px auto 20px;
        padding: 20px;
      }

      .config-tabs {
        overflow-x: auto;
      }

      .tab-button {
        white-space: nowrap;
        min-width: 120px;
      }

      .form-grid.two-column {
        grid-template-columns: 1fr;
      }
    }


/* Autofill Chrome */
input:-webkit-autofill {
  display: flex !important;
  align-items: center !important;
  background: #474747 !important;
  border-radius: 8px !important;
  border: 1px solid #363636 !important;
  box-shadow: inset 0 8px 8px -7px rgba(0, 0, 0, 0.644) !important;
  color: #dbdbdb !important;
  padding: 10px 15px !important;
  font-size: 16px !important;
  outline: none !important;
  width: 100% !important;

  -webkit-box-shadow: 0 0 0 1000px #474747 inset !important; /* fundo */
  -webkit-text-fill-color: #dbdbdb !important;              /* texto */
}

/* Autofill Firefox */
input:-moz-autofill {
  display: flex !important;
  align-items: center !important;
  background: #474747 !important;
  border-radius: 8px !important;
  border: 1px solid #363636 !important;
  box-shadow: inset 0 8px 8px -7px rgba(0, 0, 0, 0.644) !important;
  color: #dbdbdb !important;
  padding: 10px 15px !important;
  font-size: 16px !important;
  outline: none !important;
  width: 100% !important;

  box-shadow: 0 0 0 1000px #474747 inset !important;
  -moz-text-fill-color: #dbdbdb !important;
}

   footer {
      border-top: 1px solid ;
      border-image: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(51, 51, 51, 1) 20%, rgba(51, 51, 51, 1) 82%,rgba(0, 0, 0, 0) 100%) 1;
      text-align: center;
      margin-top: 20px;
      padding: 20px;
    }

    footer a {
      color: #fff;
      margin: 0 10px;
      text-decoration: none;
      font-size: 14px;
      padding-top: 10px;
      margin-top: 20px;
    }

    footer a:hover {
      text-decoration: underline;
    }

    footer p {
      margin-top: 10px;
      font-size: 12px;
      color: #aaa;
    }

        .color-input {
            width: 100%;
            height: 60px;
            border: 2px solid #ddd;
            border-radius: 16px;
            font-size: 16px;
            text-align: center;
            margin-bottom: 20px;
            outline: none;
        }

        .color-input:focus {
            border-color: #3498db;
        }

        

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }