:root {
      --bg-color: #0f1419;
      --sidebar-color: #161b22;
      --accent-color: #d4af37;
      --text-main: #e7e9ea;
      --text-dim: #71767b;
      --border: #2f3336;
  }

  * {
      box-sizing: border-box;
  }

  html,
  body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
  }

  body {
      background-color: var(--bg-color);
      color: var(--text-main);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  img {
      max-width: 100%;
      height: auto;
  }

  .app-layout {
      display: grid;
      grid-template-columns: 280px minmax(600px, 1fr) 350px;
      min-height: calc(100vh - 70px);
      margin-top: 70px;
      width: 100%;
      max-width: 100%;
      align-items: start;
  }

  .sidebar {
      background-color: var(--sidebar-color);
      border-right: 1px solid var(--border);
      padding: 20px;
      overflow-y: auto;
      position: sticky;
      top: 70px;
      height: calc(100vh - 70px);
  }

  .community-item {
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 5px;
  }

  .community-item:hover {
      background: #242c36;
  }

  main {
      border-right: 1px solid var(--border);
      overflow-y: auto;
      min-width: 0;
      width: 100%;
      max-width: 100%;
  }

  .feed-header {
      position: sticky;
      top: 0;
      background: rgba(15, 20, 25, 0.9);
      padding: 15px;
      border-bottom: 1px solid var(--border);
      font-weight: bold;
  }

  .post-box {
      padding: 15px;
      border-bottom: 8px solid var(--border);
  }

  textarea {
      width: 100%;
      background: transparent;
      border: none;
      color: white;
      resize: none;
      outline: none;
      margin-bottom: 10px;
  }

  .btn-post {
      background-color: #dc3545;
      color: white;
      border: none;
      padding: 8px 18px;
      border-radius: 20px;
      font-weight: bold;
      float: right;
  }

  .tweet-post {
      padding: 15px;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 15px;
      width: 100%;
  }

  .avatar {
      border-radius: 100%;
      height: 50px;
      width: 50px;
      min-width: 50px;
      background-color: #444;
  }

  .post-actions {
      display: flex;
      gap: 40px;
      align-items: center;
      flex-wrap: wrap;
  }

  .widgets {
      padding: 20px;
      position: sticky;
      top: 70px;
      height: calc(100vh - 70px);
      overflow-y: auto;
  }

  .trending-card {
      background: var(--sidebar-color);
      border-radius: 16px;
      padding: 15px;
      margin-bottom: 20px;
  }

  .team-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
  }

  .grid {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
  }

  /* AJUSTE PARA TELAS MENORES */
  @media (max-width: 1200px) {
      .app-layout {
          grid-template-columns: 1fr;
          grid-template-areas:
              "left"
              "main"
              "right";
      }

      .left-sidebar {
          grid-area: left;
      }

      main {
          grid-area: main;
      }

      .right-sidebar {
          grid-area: right;
      }

      .sidebar,
      .widgets {
          position: relative;
          top: auto;
          height: auto;
          width: 100%;
          border-right: none;
          border-bottom: 1px solid var(--border);
      }

      main {
          border-right: none;
      }
  }

  /* FOOTER RESPONSIVO PARA TELAS MENORES */
  @media (max-width: 768px) {
      .quadro {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center;
      }

      .quadro>div {
          width: 100% !important;
          max-width: 100%;
          margin-bottom: 30px;
      }

      .quadro .col-md-3,
      .quadro .col-4,
      .quadro .col-3,
      .quadro .col-5 {
          flex: 0 0 100%;
          max-width: 100%;
      }

      .quadro ul {
          padding: 0;
      }

      .quadro img {
          display: block;
          margin: 0 auto 15px auto;
      }

      .quadro [style*="margin-top: 100px"] {
          margin-top: 20px !important;
      }
  }