body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: radial-gradient(circle at 50% 40%, #fff9c4 0%, #fffef2 80%);
      color: #222;
      transition: background 0.4s, color 0.3s;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    header {
      background: linear-gradient(90deg,#f62323,#ff8d30);
      color: #fff;
      padding: 18px 6vw;
      text-align: center;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px 0;
    }
    header .logo-container {
      display: flex;
      align-items: center;
      gap: 22px;
    }
    header .logo-container img,
    header img {
      height: 44px;
      width: auto;
    }
    header form {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 24px;
    }
    header form input[type="text"] {
      width: 100%;
      max-width: 600px;
      padding: 10px 18px;
      border-radius: 24px;
      border: none;
      font-size: 1.1em;
      outline: none;
      margin-right: 12px;
    }
    header form button,
    header button[type="submit"] {
      background: #fff;
      color: #c00;
      border: none;
      border-radius: 24px;
      padding: 10px 24px;
      font-weight: bold;
      cursor: pointer;
    }
    header .header-links,
    header > div,
    header > form {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    header .header-links a,
    header a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      font-size: 1em;
      margin-left: 10px;
    }
    header a:first-child { margin-left: 0; }
    header a:hover { text-decoration: underline; }
    header .header-links a.produto-salvo {
      display: flex;
      align-items: center;
    }
    header .header-links a.produto-salvo img {
      height: 26px;
      width: auto;
    }
    header .header-links button#darkModeBtn,
    #darkModeBtn {
      background: transparent;
      color: #c00;
      border: none;
      padding: 6px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    header .header-links button#darkModeBtn img#darkModeIcon,
    #darkModeBtn img {
      height: 22px;
      width: auto;
    }
        /* Usuário logado */
    /* User info button styled like login/cadastro links */
    header .header-links .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 8px 24px;
      font-weight: bold;
      font-size: 1em;
      cursor: pointer;
      margin-left: 10px;
      transition: background 0.2s, color 0.2s;
    }
    header .header-links .user-info img {
      height: 28px;
      width: 28px;
      border-radius: 50%;
      background: transparent;
      object-fit: cover;
      margin-right: 8px;
    }
    header .header-links .user-info span {
      color: #fff;
      font-weight: bold;
      font-size: 1em;
      letter-spacing: 0.5px;
    }
    header .header-links .user-info:hover {
      background: rgba(255,255,255,0.12);
      text-decoration: underline;
    }
    footer {
      background: #900;
      color: #fff;
      text-align: center;
      padding: 12px;
      margin-top: 30px;
    }
    body.dark-mode {
      background: radial-gradient(circle at 50% 40%, #4a0505 0%, #1a0101 80%);
      color: #f0f0f0;
    }
    body.dark-mode footer { background: #900; color: #ccc; }
    body.dark-mode header { background: #900; color: #ccc; }
    .suggestions-panel {
      max-width: 900px;
      margin: 40px auto;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 16px #0001;
      padding: 32px 24px;
      color: #222;
      transition: background 0.4s, color 0.3s;
    }
    body.dark-mode .suggestions-panel {
      background: #2a0505 !important;
      color: #f0f0f0!important;
    }
    .suggestions-panel h2 {
      margin-top: 0;
      text-align: center;
      font-size: 2em;
      color: #c00;
    }
    .suggestion-list { margin: 24px 0; }
    .suggestion-item {
      border-bottom: 1px solid #eee;
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    body.dark-mode .suggestion-item {
      border-bottom: 1px solid #333;
    }
    .suggestion-actions button {
      margin-left: 8px;
      background: #888;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 6px 12px;
      cursor: pointer;
    }
    .wysiwyg-toolbar {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .wysiwyg-toolbar button, .wysiwyg-toolbar select, .wysiwyg-toolbar input[type="color"] {
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #ccc;
      background: #f9f9f9;
      cursor: pointer;
      font-size: 1em;
    }
    body.dark-mode .wysiwyg-toolbar button,
    body.dark-mode .wysiwyg-toolbar select,
    body.dark-mode .wysiwyg-toolbar input[type="color"] {
      background: #222;
      color: #fff;
      border: 1px solid #444;
    }
    .wysiwyg-editor {
      min-height: 160px;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 10px;
      background: #fff;
      margin-bottom: 12px;
      font-size: 1.1em;
      outline: none;
      transition: background 0.4s, color 0.3s;
    }
    body.dark-mode .wysiwyg-editor {
      background: #1a0101;
      color: #f0f0f0;
      border: 1px solid #333;
    }
    .suggestion-form label,
    .login-form label {
      display: block;
      margin-top: 12px;
    }
    .suggestion-form input[type="text"],
    .suggestion-form textarea,
    .login-form input[type="text"],
    .login-form input[type="password"],
    .login-form input[type="email"],
    .login-form input[type="tel"] {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      margin-top: 4px;
      font-size: 1em;
      background: #fff;
      color: #222;
      transition: background 0.4s, color 0.3s, border 0.3s;
    }
body.dark-mode .suggestion-form input[type="text"],
body.dark-mode .suggestion-form textarea,
body.dark-mode .login-form input[type="text"],
body.dark-mode .login-form input[type="password"],
body.dark-mode .login-form input[type="email"],
body.dark-mode .login-form input[type="tel"] {
  background: #1a0101;
  color: #f0f0f0;
  border: 1px solid #900;
}
    .suggestion-form input[type="checkbox"] { margin-right: 6px; }
    .suggestion-form button,
    .login-form button,
    .login-form button[type="submit"] {
      margin-top: 18px;
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 15px 200px;
      font-weight: bold;
      cursor: pointer;
      font-size: 1.2em;
      width: 100%;
      transition: background 0.3s;
    }
    .suggestion-form button:hover,
    .login-form button:hover,
    .suggestion-btn:hover {
      background: #ff8d30;
      color: #fff;
    }
    .suggestion-btn {
      display: block;
      margin: 48px auto 32px auto;
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 16px 44px;
      font-size: 1.3em;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s;
      box-shadow: 0 2px 12px #0001;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .password-toggle {
      margin-top: 6px;
      background: none;
      border: none;
      color: #c00;
      cursor: pointer;
      font-size: 0.95em;
      padding: 0;
    }
    .password-toggle:hover { text-decoration: underline; }
    .login-form {
      margin-top: 16px;
      text-align: left;
    }
    .login-links {
      margin-top: 16px;
      text-align: center;
    }
    .login-links a {
      color: #c00;
      text-decoration: none;
      margin: 0 10px;
      font-size: 1em;
    }
    .login-links a:hover { text-decoration: underline; }
    .recaptcha-container {
      margin-top: 22px;
      display: flex;
      justify-content: center;
    }
    .error-message {
      color: #c00;
      font-size: 0.98em;
      margin-top: 4px;
    }
    @media (max-width: 1100px) {
      header > div[style*="flex:0 0 64px;"] { flex-basis:24px !important; }
      header { padding:14px 4vw; }
    }
    @media (max-width: 900px) {
      header { flex-direction:column; align-items:stretch; gap:10px 0; }
      header > div, header > form { justify-content:center; margin-bottom:6px; }
      header form { margin:10px 0; }
      header > div[style*="flex:0 0 64px;"] { display:none; }
      .suggestion-btn { padding: 14px 4vw; font-size: 1.1em; }
      .suggestions-panel { padding: 16px 4vw; }
    }
    @media (max-width: 600px) {
      header { padding:12px 2vw; }
      header h1 { font-size:1.2em; }
      header form input { max-width:120px; }
      header > div, header > form { flex-direction:column; align-items:center; gap:8px; }
      .suggestions-panel { padding: 12px 2vw; }
      .suggestion-btn { padding: 10px 2vw; font-size: 1em; }
    }
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 48px;
      min-height: 60vh;
    }
    
    .main-title {
      font-size: 2.1em;
      font-weight: bold;
      margin-bottom: 18px;
      text-align: center;
    }
    .no-products-msg {
      text-align: center;
      color: #c00;
      font-size: 1.2em;
      margin-bottom: 24px;
      background: #fff3f3;
      border-radius: 8px;
      padding: 18px 32px;
    }
    body.dark-mode .no-products-msg {
      background: #2a0a0a;
      color: #ffbdbd;
    }
    .add-folder-btn {
      background: rgb(255, 0, 0);
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 10px 28px;
      font-size: 1.1em;
      font-weight: bold;
      cursor: pointer;
      margin-bottom: 32px;
      transition: background 0.2s;
      box-shadow: 0 2px 12px #0001;
      letter-spacing: 1px;
    }
    .add-folder-btn:hover {
      background: #ff8d30;
      color: #fff;
    }
    .folders-list {
      width: 100%;
      max-width: 700px;
      margin-top: 24px;
      padding: 0;
    }
    .folder {
      background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
      border-radius: 16px;
      margin-bottom: 16px;
      padding: 28px 32px 24px 32px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 2px solid rgba(255, 200, 200, 0.2);
      width: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .folder::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #ff6b6b, #ff8e8e, #ffb3b3);
      border-radius: 16px 16px 0 0;
    }
    
    .folder:hover {
      box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
      transform: translateY(-3px) scale(1.01);
      border-color: rgba(255, 170, 170, 0.4);
    }
    
    body.dark-mode .folder {
      background: linear-gradient(135deg, #2d1b1b 0%, #3a2222 100%);
      border-color: rgba(170, 68, 68, 0.3);
      box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
    }
    
    body.dark-mode .folder::before {
      background: linear-gradient(90deg, #cc5555, #dd6666, #ee7777);
    }
    
    body.dark-mode .folder:hover {
      box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
      border-color: rgba(204, 85, 85, 0.5);
    }
    body.dark-mode .products-list {
      border-top-color: rgba(255,255,255,0.1);
    }
      .remove-post-btn {
        background: #e53935;
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        padding: 0;
        margin-left: 10px;
        cursor: pointer;
        font-weight: bold;
        transition: background 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
      }
      .remove-post-btn img {
        width: 18px;
        height: 18px;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        filter: brightness(0) invert(1);
      }
    .remove-post-btn:hover {
      background: #b71c1c;
    }    .folder-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        padding: 16px 20px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
      }
      
      body.dark-mode .folder-header {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.1);
      }
      
      .folder-name-section {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      
      .folder-products-count {
        font-size: 0.9em;
        color: rgba(0, 0, 0, 0.6);
        font-weight: 500;
        background: rgba(255, 255, 255, 0.6);
        padding: 4px 8px;
        border-radius: 8px;
        display: inline-block;
        width: fit-content;
      }
      
      body.dark-mode .folder-products-count {
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.1);
      }
      
      .folder-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .folder-header input[type="text"] {
      font-size: 1.4em;
      border: none;
      background: transparent;
      font-weight: 600;
      flex-grow: 1;
      outline: none;
      color: inherit;
      padding: 8px 0;
      border-radius: 6px;
      transition: background 0.2s;
    }
    
    .folder-header input[type="text"]:focus {
      background: rgba(255, 255, 255, 0.3);
      padding: 8px 12px;
    }
    
    body.dark-mode .folder-header input[type="text"]:focus {
      background: rgba(255, 255, 255, 0.1);
    }
    .folder-header .folder-actions button {
      background: linear-gradient(135deg, #ff6b6b, #ff5252);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 0.9em;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
      font-weight: 500;
      min-height: 40px;
    }
    
    .folder-header .folder-actions button:hover {
      background: linear-gradient(135deg, #ff5252, #e53935);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    }
    
    .folder-header .folder-actions button:active {
      transform: translateY(0);
    }
    .folder-header .folder-actions button img {
      width: 16px;
      height: 16px;
    }
    .products-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 8px;
      padding-top: 16px;
      border-top: 1px solid rgba(0,0,0,0.08);
      border-radius: 8px;
    }

    /* Drag handle para pastas */
    .folder-drag-handle {
        color: rgba(0, 0, 0, 0.6);
        font-size: 1.4em;
        font-weight: bold;
        cursor: grab;
        user-select: none;
        padding: 8px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.05);
        transition: all 0.2s;
        opacity: 0;
        margin-right: 12px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
    }

    .folder:hover .folder-drag-handle {
        opacity: 1;
    }

    .folder-drag-handle:hover {
        background: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }

    .folder-drag-handle:active {
        cursor: grabbing;
    }

    /* Estados de drag and drop para pastas */
    .folder.dragging {
        opacity: 0.6;
        transform: rotate(2deg) scale(0.98);
        z-index: 1000;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        transition: none;
    }

    .folder.drag-over {
        transform: scale(1.01);
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.6);
        border: 2px dashed #4CAF50;
        background-color: rgba(76, 175, 80, 0.05);
    }

    .folder.dragging .folder-drag-handle {
        cursor: grabbing;
        opacity: 1;
        background: rgba(76, 175, 80, 0.8);
        color: #fff;
    }

    /* Dark mode para drag handle das pastas */
    body.dark-mode .folder-drag-handle {
        color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.1);
    }

    body.dark-mode .folder:hover .folder-drag-handle {
        opacity: 1;
    }

    body.dark-mode .folder-drag-handle:hover {
        background: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
    }

    body.dark-mode .folder.drag-over {
        box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.6);
        border-color: #81C784;
        border-style: dashed;
        background-color: rgba(129, 199, 132, 0.1);
    }

    body.dark-mode .folder.dragging .folder-drag-handle {
        background: rgba(129, 199, 132, 0.8);
        color: #fff;
    }

        .folder-bg-blur {
      position: fixed;
      inset: 0;
      z-index: -1;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      filter: blur(5px) brightness(0.8);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s;
    }
    .folder-bg-blur.active {
      opacity: 1;
    }
          .add-bg-btn {
      display: block;
      margin: 0 auto 24px auto;
      background: #ff8d30;
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 10px 32px;
      font-size: 1.05em;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s;
      box-shadow: 0 2px 12px #0001;
      letter-spacing: 1px;
      }
      .add-bg-btn:hover {
      background: #c00;
      }
      .add-bg-input {
      display: none;
      }
    body.dark-mode .folder-bg-blur {
      filter: blur(5px) brightness(0.5);
    }
    /* Container integrado para header, info e editor */
    .post-container {
      position: relative;
      width: 100%;
      max-width: 800px; /* Reduzido de 1200px para tornar mais fino */
      margin: 32px auto 32px auto;
    }
    
    /* Estilo para post.html - Header com imagem embaçada */
    .post-header {
      position: relative;
      width: 100%;
      height: 180px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      margin: 0;
    }
    
    /* Overlay embaçado no header */
    .post-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 0;
    }
    
    /* Campo de informações da postagem - parte do bloco integrado */
    .post-info-field {
      background: #fff;
      border-radius: 0;
      padding: 16px 24px;
      margin: 0;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 1;
      margin-top: -2px;
      border-bottom: 1px solid #e0e0e0;
      min-height: 60px;
    }
    
    /* Editor integrado ao bloco da postagem */
    .post-container .editor-panel {
      background: #fff;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      margin: 0;
      padding: 24px;
      max-width: none;
      display: none;
    }
    
    .post-container .editor-panel.active {
      display: block;
    }
    
    /* Post finalizado integrado */
    .post-container .final-post {
      background: #fff;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      margin: 0;
      padding: 24px;
      max-width: none;
      display: none;
      font-size: 1.2em; /* Adicionado tamanho de fonte maior */
      line-height: 1.6; /* Melhor espaçamento entre linhas */
    }
    
    .post-container .final-post.active {
      display: block;
    }
    
    /* Quando não há container de post, usar estilo normal */
    .editor-panel:not(.post-container .editor-panel) {
      max-width: 900px;
      margin: 40px auto;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 16px #0001;
      padding: 32px 24px;
      color: #222;
    }
    
    .final-post:not(.post-container .final-post) {
      max-width: 900px;
      margin: 40px auto;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 16px #0001;
      padding: 32px 24px;
      color: #222;
      font-size: 1.1em;
      word-break: break-word;
    }
    
    /* Ícone da postagem - sobreposição elegante */
    .post-icon {
      position: absolute;
      left: 24px;
      top: -50px; /* Sobrepõe o header */
      width: 100px;
      height: 100px;
      border-radius: 16px;
      border: 4px solid #fff;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      object-fit: cover;
      background: #f5f5f5;
      z-index: 10;
    }
    
    /* Dark mode para post info e editor integrado */
    body.dark-mode .post-info-field {
      background: #390303;
      color: #f0f0f0;
      border-bottom-color: #8d0d0d74;
    }
    
    body.dark-mode .post-container .editor-panel {
      background: #2a2a2a;
      color: #f0f0f0;
    }
    
    body.dark-mode .post-container .final-post {
      background: #390303;
      color: #f0f0f0;
    }
    
    body.dark-mode .post-icon {
      background: #1a1a1a;
      border-color: #2a2a2a;
    }
    
    /* Responsivo para post header e info */
    @media (max-width: 900px) {
      .post-container {
        margin: 16px auto 24px auto;
        max-width: calc(100% - 32px);
      }
      
      .post-header {
        height: 140px;
      }
      
      .post-info-field {
        padding: 12px 20px;
        min-height: 50px;
      }
      
      .post-icon {
        width: 80px;
        height: 80px;
        top: -40px;
        left: 20px;
      }
    }
    
    @media (max-width: 600px) {
      .post-container {
        margin: 12px auto 16px auto;
        max-width: calc(100% - 24px);
      }
      
      .post-header {
        height: 120px;
        border-radius: 12px 12px 0 0;
      }
      
      .post-info-field {
        padding: 8px 16px;
        min-height: 40px;
      }
      
      .post-icon {
        width: 60px;
        height: 60px;
        top: -30px;
        left: 16px;
        border-radius: 12px;
        border-width: 3px;
      }
    }
    .posts-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: flex-start; /* Começar da esquerda, diferente das pastas que são centralizadas */
      align-items: flex-start;
      margin: 36px auto 32px auto;
      max-width: 1300px;
      width: 100%;
      padding: 0 16px;
      min-height: 100px;
      position: relative;
      z-index: 0;
    }
    
    /* Disclaimer sobre as imagens das postagens */
    .posts-disclaimer {
      width: 100%;
      margin-top: 32px;
      padding: 20px 24px;
      background: rgba(255, 230, 0, 0.588);
      border: 1px solid rgba(255, 193, 7, 0.6);
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .posts-disclaimer p {
      margin: 0;
      color: #2e2e2e;
      font-size: 0.9em;
      line-height: 1.5;
      font-weight: 500;
    }
    
    .posts-disclaimer strong {
      color: #1a1a1a;
      font-weight: 700;
    }
    
    .post-box {
      position: relative;
      display: flex;
      align-items: center;
      background: transparent; /* SEM COR VERMELHA */
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow 0.18s, transform 0.18s;
      height: 120px;
      min-height: 120px;
      padding: 16px;
      gap: 16px;
      /* BACKGROUND COM IMAGEM EMBAÇADA */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    
    /* Overlay escuro sobre a imagem de fundo - SEM VERMELHO */
    .post-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5); /* OVERLAY PRETO TRANSPARENTE */
      backdrop-filter: blur(8px); /* EMBAÇAMENTO */
      -webkit-backdrop-filter: blur(8px);
      z-index: 0;
      border-radius: 12px;
    }
    .post-box:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      transform: translateY(-1px);
    }
    
    /* Imagem à esquerda com borda */
    .post-img {
      width: 100px;
      height: 88px;
      object-fit: cover;
      background: #f5f5f5;
      display: block;
      border-radius: 8px;
      margin: 0;
      flex-shrink: 0;
      border: 3px solid #fff; /* BORDA BRANCA */
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      position: relative;
      z-index: 1; /* ACIMA DO OVERLAY */
    }
    
    /* Título no painel vermelho */
    .post-title {
      position: static;
      padding: 0 0 0 30px; /* Espaçamento considerável à esquerda */
      font-size: 1.3em;
      color: #fff; /* TEXTO BRANCO */
      font-weight: bold;
      background: transparent;
      word-break: break-word;
      border-radius: 0;
      text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* SOMBRA MAIS FORTE */
      line-height: 1.4;
      flex-grow: 1;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1; /* ACIMA DO OVERLAY */
    }
    
    /* Botões otimizados para layout esticado */
    .delete-post-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      background: rgba(255, 255, 255, 0.9);
      color: #c00;
      border: none;
      border-radius: 50%;
      font-size: 1.1em;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      cursor: pointer;
      z-index: 2; /* ACIMA DO OVERLAY */
      transition: opacity 0.18s, background 0.18s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      padding: 0;
      line-height: 1;
      pointer-events: none;
    }
    .post-box:hover .delete-post-btn {
      opacity: 1;
      pointer-events: auto;
    }
    .delete-post-btn:hover {
      background: rgba(255, 255, 255, 1);
    }

    /* Botão de salvar post para layout esticado */
    .save-post-btn {
      position: absolute;
      top: 12px;
      right: 48px;
      background: rgba(255, 255, 255, 0.9);
      color: #c00;
      border: none;
      border-radius: 6px;
      font-size: 0.9em;
      font-weight: bold;
      padding: 6px 12px;
      cursor: pointer;
      opacity: 0;
      z-index: 2; /* ACIMA DO OVERLAY */
      transition: opacity 0.18s, background 0.18s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      pointer-events: none;
    }
    .post-box:hover .save-post-btn {
      opacity: 1;
      pointer-events: auto;
    }
    .save-post-btn:hover {
      background: rgba(255, 255, 255, 1);
    }
    
    /* Dark mode para postagens esticadas */
    body.dark-mode .post-box {
      background: transparent; /* SEM COR VERMELHA NO DARK MODE */
      color: #f0f0f0;
    }
    
    /* Overlay escuro para dark mode - SEM VERMELHO */
    body.dark-mode .post-box::before {
      background: rgba(0, 0, 0, 0.7); /* OVERLAY PRETO MAIS ESCURO NO DARK MODE */
    }
    
    body.dark-mode .post-title {
      color: #fff;
    }
    body.dark-mode .post-img {
      background: #1a1a1a;
      border-color: #fff;
    }

    /* Blur background for folders */
    .centered-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 10vh;
    }
    .product-card {
      background: linear-gradient(135deg, #fff9f0 0%, #ffe8d1 100%);
      border: 2px solid rgba(255, 214, 179, 0.6);
      border-radius: 12px;
      padding: 16px 18px;
      min-width: 200px;
      max-width: 280px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }
    
    .product-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, #ffa726, #ffb74d, #ffcc80);
    }
    
    .product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
      border-color: rgba(255, 167, 38, 0.8);
    }
    
    body.dark-mode .product-card {
      background: linear-gradient(135deg, #3a1818 0%, #2d1515 100%);
      border-color: rgba(170, 68, 68, 0.6);
      box-shadow: 0 3px 12px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.1);
    }
    
    body.dark-mode .product-card::before {
      background: linear-gradient(90deg, #cc7a00, #e68900, #ff9500);
    }
    
    body.dark-mode .product-card:hover {
      box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15);
      border-color: rgba(204, 122, 0, 0.8);
    }
    .product-card .remove-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: linear-gradient(135deg, #ff5252, #e53935);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 26px;
      height: 26px;
      font-size: 1.1em;
      cursor: pointer;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(255, 82, 82, 0.4);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: bold;
    }
    
    .product-card .remove-btn:hover {
      background: linear-gradient(135deg, #e53935, #c62828);
      transform: scale(1.1);
      box-shadow: 0 3px 8px rgba(255, 82, 82, 0.6);
    }
        /* Painel flutuante para criar pasta */
    .modal-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .float-panel {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.18);
        padding: 28px 24px 20px 24px;
        min-width: 320px;
        max-width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 18px;
        position: relative;
        animation: modalFadeIn 0.2s;
    }
    .float-panel.dark-mode {
        background: #232323;
        color: #eee;
    }
    .float-panel label {
        font-weight: 500;
        margin-bottom: 4px;
    }
    .float-panel input[type="text"] {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #bbb;
        border-radius: 5px;
        font-size: 1em;
        margin-bottom: 10px;
        background: #fafafa;
        color: #222;
    }
    .float-panel.dark-mode input[type="text"] {
        background: #333;
        color: #eee;
        border: 1px solid #444;
    }
    .float-panel .modal-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }
    .float-panel button {
        padding: 7px 18px;
        border-radius: 5px;
        border: none;
        font-size: 1em;
        cursor: pointer;
        font-weight: 500;
        transition: background 0.15s;
    }
    .float-panel .create-btn {
        background: #2e7d32;
        color: #fff;
    }
    .float-panel .create-btn:disabled {
        background: #bdbdbd;
        cursor: not-allowed;
    }
    .float-panel .cancel-btn {
        background: #eee;
        color: #222;
    }
    .float-panel.dark-mode .cancel-btn {
        background: #444;
        color: #eee;
    }
    @keyframes modalFadeIn {
        from { opacity: 0; transform: translateY(30px);}
        to { opacity: 1; transform: translateY(0);}
    }
        .delete-panel-overlay {
        position: fixed;
        z-index: 10000;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.35);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .delete-panel {
        background: #fff;
        color: #222;
        border-radius: 10px;
        box-shadow: 0 2px 24px rgba(0,0,0,0.18);
        padding: 32px 28px 22px 28px;
        min-width: 320px;
        max-width: 90vw;
        text-align: center;
        position: relative;
        font-family: inherit;
        animation: fadeInDeletePanel 0.18s;
    }
    .delete-panel.dark-mode {
        background: #23272f;
        color: #f3f3f3;
    }
    .delete-panel .delete-panel-title {
        font-size: 1.18em;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .delete-panel .delete-panel-msg {
        margin-bottom: 22px;
        font-size: 1em;
    }
    .delete-panel .delete-panel-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
    }
    .delete-panel .delete-btn {
        background: #e53935;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 8px 22px;
        font-size: 1em;
        cursor: pointer;
        transition: background 0.18s;
    }
    .delete-panel .delete-btn:hover {
        background: #b71c1c;
    }
    .delete-panel .cancel-btn {
        background: #eee;
        color: #222;
        border: none;
        border-radius: 5px;
        padding: 8px 22px;
        font-size: 1em;
        cursor: pointer;
        transition: background 0.18s;
    }
    .delete-panel.dark-mode .cancel-btn {
        background: #353a42;
        color: #f3f3f3;
    }
    .delete-panel .cancel-btn:hover {
        background: #ccc;
    }
    .delete-panel.dark-mode .cancel-btn:hover {
        background: #444;
    }
    @keyframes fadeInDeletePanel {
        from { opacity: 0; transform: translateY(30px);}
        to { opacity: 1; transform: translateY(0);}
    }
        .folder-action {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    .folder-edit-btn {
        background: #ff9800;
        border: none;
        border-radius: 4px;
        padding: 3px 7px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        transition: background 0.2s;
        margin-right: 2px;
    }
    .folder-edit-btn img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        filter: drop-shadow(0 0 1px #fff8);
    }
    .folder-edit-btn:hover {
        background: #fb8c00;
    }
        /* Produtos Salvos de Postagens */
    .saved-posts-list {
        margin: 32px auto 0 auto;
        max-width: 1000px;
        padding: 16px 0 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 18px;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .saved-posts-list .main-title {
        font-size: 1.25em;
        font-weight: bold;
        margin-bottom: 10px;
        color: #2d2d2d;
        letter-spacing: 0.5px;
        width: 100%;
        flex-basis: 100%;
    }
    .saved-post-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.07);
        padding: 0;
        gap: 0;
        position: relative;
        transition: box-shadow 0.2s;
        min-height: 15px;
        height: 50px;
        overflow: hidden;
        width: 270px;
        min-width: 220px;
        max-width: 100%;
        margin-bottom: 0;
        flex: 0 1 270px;
        cursor: pointer;
        text-decoration: none;
    }
    .saved-post-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
        background: #f2f2f2;
        margin: 0;
        box-shadow: none;
        display: block;
        position: relative;
        z-index: 0;
    }
    /* Esconde o título fixo */
    .saved-post-card .saved-post-title {
        display: none !important;
    }
    .remove-saved-post-btn {
        position: absolute;
        top: 10px;
        right: 12px;
        background: #f7f7f7;
        border: none;
        color: #e53935;
        font-size: 1.3em;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        cursor: pointer;
        transition: background 0.15s;
        z-index: 2;
    }
    .remove-saved-post-btn:hover {
        background: #ffeaea;
    }
    body.dark-mode .saved-post-card {
        background: #23242a;
        color: #f3f3f3;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.22);
    }
    body.dark-mode .saved-posts-list .main-title {
        color: #f3f3f3;
    }
    body.dark-mode .remove-saved-post-btn {
        background: #2d2d2d;
        color: #ff8a80;
    }
    body.dark-mode .remove-saved-post-btn:hover {
        background: #3a2323;
    }

    /* Novo design card inspirado na referência - sem fundo borrado */
    .saved-post-mini {
        position: relative;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.12);
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        width: 200px;
        min-width: 180px;
        max-width: 220px;
        flex: 0 1 200px;
        /* Remover margin-bottom pois agora usa gap no container */
        /* SEM background de imagem - design card limpo */
        background-size: initial;
        background-position: initial;
        background-repeat: initial;
        background-image: none !important;
    }

    /* Imagem de capa com moldura sutil */
    .saved-post-mini .post-cover-image {
        width: 100%;
        height: 140px;
        border-radius: 12px 12px 0 0;
        object-fit: cover;
        background: #f5f5f5;
        display: block;
        border: 2px solid rgba(0, 0, 0, 0.08);
        box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.05),
            0 1px 3px rgba(0, 0, 0, 0.1);
        transition: border-color 0.2s ease;
    }

    /* Área do título */
    .saved-post-mini .post-content-area {
        padding: 12px 16px 16px 16px;
        background: inherit;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Estilo hover para o card */
    .saved-post-mini:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(0,0,0,0.18);
    }


    /* Imagem mini à esquerda */
    .saved-post-img {
        width: 60px;
        height: 56px;
        object-fit: cover;
        background: #f5f5f5;
        display: block;
        border-radius: 6px;
        margin: 0;
        flex-shrink: 0;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        position: relative;
        z-index: 1;
    }

    /* Placeholder para imagem ausente */
    .saved-post-img.no-image {
        background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 0.8em;
        font-weight: 500;
    }

    .saved-post-img.no-image::before {
        content: '📷';
        font-size: 1.2em;
    }

    /* Título no card - novo estilo limpo */
    .saved-post-title-mini {
        font-size: 0.95em;
        color: #2c2c2c;
        font-weight: 600;
        background: transparent;
        word-break: break-word;
        text-shadow: none;
        line-height: 1.4;
        flex-grow: 1;
        display: flex;
        align-items: flex-start;
        position: relative;
        z-index: 1;
        margin: 0 0 8px 0;
        padding: 0;
    }

    /* Área dos botões de ação */
    .saved-post-mini .post-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        margin-top: auto;
    }

    /* Botões de ação - design minimalista */
    .saved-post-mini .delete-post-btn,
    .saved-post-mini .save-post-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 8px;
        font-size: 0.8em;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        z-index: 3;
    }

    .saved-post-mini .delete-post-btn {
        background: #fee;
        color: #d32f2f;
    }

    .saved-post-mini .delete-post-btn:hover {
        background: #ffcdd2;
        transform: scale(1.05);
    }

    .saved-post-mini .save-post-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        background: #e53935;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 6px 12px;
        font-size: 0.85em;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 3;
        opacity: 0;
        box-shadow: 0 2px 6px rgba(229, 57, 53, 0.3);
        pointer-events: none;
    }

    .saved-post-mini:hover .save-post-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .saved-post-mini .save-post-btn:hover {
        background: #d32f2f;
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4);
    }

    /* Botão remover adaptado para mini */
    .saved-post-mini .remove-saved-post-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        color: #e53935;
        font-size: 1.1em;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        cursor: pointer;
        transition: background 0.15s, opacity 0.18s;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        pointer-events: none;
    }

    .saved-post-mini:hover .remove-saved-post-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .saved-post-mini .remove-saved-post-btn:hover {
        background: rgba(255, 255, 255, 1);
    }

    /* Botão X vermelho redondo no canto esquerdo - APENAS para admins */
    .saved-post-mini .admin-remove-btn {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #e53935;
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4);
        pointer-events: none;
    }

    .saved-post-mini:hover .admin-remove-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .saved-post-mini .admin-remove-btn:hover {
        background: #d32f2f;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(229, 57, 53, 0.6);
    }

    /* Botão de editar no canto superior - APENAS para admins */
    .saved-post-mini .admin-edit-btn {
        position: absolute;
        top: 8px;
        left: 40px;
        background: #2196f3;
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 11px;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
        pointer-events: none;
    }

    .saved-post-mini:hover .admin-edit-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .saved-post-mini .admin-edit-btn:hover {
        background: #1976d2;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.6);
    }

    /* Badge de categoria no canto inferior direito da imagem */
    .saved-post-mini .post-category-badge {
        position: absolute;
        bottom: 62px;
        right: 8px;
        background: #e53935;
        color: white;
        padding: 4px 8px;
        font-size: 0.75em;
        font-weight: bold;
        border-radius: 4px;
        z-index: 3;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 6px rgba(229, 57, 53, 0.4);
        pointer-events: none;
    }

    /* Dark mode para mini cards */
    body.dark-mode .saved-post-mini::before {
        background: rgba(0, 0, 0, 0.6);
    }

    body.dark-mode .saved-post-img {
        background: #1a1a1a;
        border-color: #fff;
    }

    body.dark-mode .saved-post-img.no-image {
        background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
        color: #666;
    }

    /* Modo escuro para o novo design */
    body.dark-mode .saved-post-mini {
        background: #2a2a2a;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

    body.dark-mode .saved-post-mini:hover {
        box-shadow: 0 6px 25px rgba(0,0,0,0.4);
    }

    body.dark-mode .saved-post-title-mini {
        color: #e8e8e8;
    }

    body.dark-mode .saved-post-mini .post-cover-image {
        background: #1a1a1a;
        border: 2px solid rgba(255, 255, 255, 0.06);
        box-shadow: 
            0 1px 3px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    /* Botões no modo escuro */
    body.dark-mode .saved-post-mini .delete-post-btn {
        background: #3a1a1a;
        color: #ff8a80;
    }

    body.dark-mode .saved-post-mini .delete-post-btn:hover {
        background: #4a2020;
    }

    body.dark-mode .saved-post-mini .save-post-btn {
        background: #e53935;
        color: white;
        box-shadow: 0 2px 6px rgba(229, 57, 53, 0.4);
    }

    body.dark-mode .saved-post-mini .save-post-btn:hover {
        background: #d32f2f;
        box-shadow: 0 4px 12px rgba(229, 57, 53, 0.5);
    }

    body.dark-mode .saved-post-mini .admin-remove-btn {
        background: #e53935;
        color: white;
        box-shadow: 0 2px 8px rgba(229, 57, 53, 0.5);
    }

    body.dark-mode .saved-post-mini .admin-remove-btn:hover {
        background: #d32f2f;
        box-shadow: 0 4px 12px rgba(229, 57, 53, 0.7);
    }

    body.dark-mode .saved-post-mini .admin-edit-btn {
        background: #2196f3;
        color: white;
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.5);
    }

    body.dark-mode .saved-post-mini .admin-edit-btn:hover {
        background: #1976d2;
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.7);
    }

    body.dark-mode .saved-post-mini .post-category-badge {
        background: #e53935;
        color: white;
        box-shadow: 0 2px 6px rgba(229, 57, 53, 0.5);
    }

    /* Disclaimer no modo escuro */
    body.dark-mode .posts-disclaimer {
        background: rgba(255, 193, 7, 0.696);
        border-color: rgba(255, 235, 59, 0.7);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    
    body.dark-mode .posts-disclaimer p {
        color: #1a1a1a;
        font-weight: 600;
    }
    
    body.dark-mode .posts-disclaimer strong {
        color: #000000;
        font-weight: 800;
    }

    body.dark-mode .saved-post-mini .remove-saved-post-btn {
        background: rgba(45, 45, 45, 0.9);
        color: #ff8a80;
    }

    body.dark-mode .saved-post-mini .remove-saved-post-btn:hover {
        background: rgba(58, 35, 35, 1);
    }

    /* Drag handle para postagens salvas */
    .saved-post-mini .drag-handle {
        position: absolute;
        top: 8px;
        left: 8px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.2em;
        font-weight: bold;
        cursor: grab;
        user-select: none;
        z-index: 2;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        padding: 4px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.3);
        transition: all 0.2s;
        opacity: 0;
        pointer-events: none;
    }

    .saved-post-mini:hover .drag-handle {
        opacity: 1;
        pointer-events: auto;
    }

    .saved-post-mini .drag-handle:hover {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        transform: scale(1.1);
    }

    .saved-post-mini .drag-handle:active {
        cursor: grabbing;
    }

    /* Estados de drag and drop */
    .saved-post-mini.dragging {
        opacity: 0.6;
        transform: rotate(3deg) scale(0.95);
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        transition: none;
    }

    .saved-post-mini.drag-over {
        transform: scale(1.02);
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.6);
        border: 2px dashed #4CAF50;
        background-color: rgba(76, 175, 80, 0.1);
    }

    .saved-post-mini.dragging .drag-handle {
        cursor: grabbing;
        opacity: 1;
        background: rgba(76, 175, 80, 0.8);
        color: #fff;
    }

    /* Dark mode para drag handle */
    body.dark-mode .saved-post-mini .drag-handle {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(0, 0, 0, 0.4);
    }

    body.dark-mode .saved-post-mini .drag-handle:hover {
        background: rgba(0, 0, 0, 0.7);
    }

    body.dark-mode .saved-post-mini.drag-over {
        box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.6);
        border-color: #81C784;
        border-style: dashed;
        background-color: rgba(129, 199, 132, 0.1);
    }

    body.dark-mode .saved-post-mini.dragging .drag-handle {
        background: rgba(129, 199, 132, 0.8);
        color: #fff;
    }

    /* Floating title panel */
    .floating-title-panel {
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        background: rgba(30,30,30,0.97);
        color: #fff;
        font-size: 1.08em;
        font-weight: 500;
        padding: 10px 14px 8px 14px;
        border-radius: 10px;
        box-shadow: 0 4px 18px 0 rgba(0,0,0,0.18);
        max-width: 350px;
        min-width: 80px;
        white-space: pre-line;
        opacity: 0.98;
        transition: opacity 0.15s;
        left: 0; top: 0;
        display: none;
        text-align: center;
        word-break: break-word;
    }
    body.dark-mode .floating-title-panel {
        background: rgba(30,30,30,0.97);
        color: #fff;
    }

    /* Painel de seleção de pasta para salvar */
    .save-to-pasta-panel-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .save-to-pasta-panel {
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        min-width: 400px;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        animation: saveTopastaFadeIn 0.3s ease-out;
    }

    @keyframes saveTopastaFadeIn {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(20px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .save-to-pasta-title {
        font-size: 1.4em;
        font-weight: bold;
        color: #2d2d2d;
        margin-bottom: 8px;
        text-align: center;
    }

    .save-to-pasta-subtitle {
        font-size: 1em;
        color: #666;
        margin-bottom: 20px;
        text-align: center;
        line-height: 1.4;
    }

    .pasta-option {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 12px;
        cursor: pointer;
        transition: all 0.2s;
        outline: none;
    }

    .pasta-option:hover,
    .pasta-option:focus {
        background: #e3f2fd;
        border-color: #2196F3;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
    }

    .pasta-option.outside-pasta {
        background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
        border-color: #4caf50;
    }

    .pasta-option.outside-pasta:hover,
    .pasta-option.outside-pasta:focus {
        background: linear-gradient(135deg, #c8e6c9, #dcedc8);
        border-color: #388e3c;
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }

    .pasta-name {
        font-size: 1.1em;
        font-weight: bold;
        color: #2d2d2d;
        margin-bottom: 4px;
    }

    .pasta-products-count {
        font-size: 0.9em;
        color: #666;
    }

    .pastas-divider {
        text-align: center;
        font-size: 0.95em;
        color: #888;
        margin: 20px 0 16px 0;
        position: relative;
    }

    .pastas-divider::before,
    .pastas-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 30%;
        height: 1px;
        background: #ddd;
    }

    .pastas-divider::before {
        left: 0;
    }

    .pastas-divider::after {
        right: 0;
    }

    .pastas-list {
        max-height: 300px;
        overflow-y: auto;
        margin-bottom: 20px;
    }

    .save-to-pasta-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .save-to-pasta-actions .cancel-btn {
        background: #6c757d;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 1em;
        cursor: pointer;
        transition: background 0.2s;
    }

    .save-to-pasta-actions .cancel-btn:hover {
        background: #5a6268;
    }

    /* Dark mode para painel de seleção de pasta */
    body.dark-mode .save-to-pasta-panel {
        background: #2d2d2d;
        color: #f0f0f0;
    }

    body.dark-mode .save-to-pasta-title {
        color: #f0f0f0;
    }

    body.dark-mode .save-to-pasta-subtitle {
        color: #aaa;
    }

    body.dark-mode .pasta-option {
        background: #3a3a3a;
        border-color: #555;
        color: #f0f0f0;
    }

    body.dark-mode .pasta-option:hover,
    body.dark-mode .pasta-option:focus {
        background: #404040;
        border-color: #64b5f6;
        box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
    }

    body.dark-mode .pasta-option.outside-pasta {
        background: linear-gradient(135deg, #2e5e2e, #3a5f3a);
        border-color: #66bb6a;
    }

    body.dark-mode .pasta-option.outside-pasta:hover,
    body.dark-mode .pasta-option.outside-pasta:focus {
        background: linear-gradient(135deg, #388e3c, #4caf50);
        border-color: #81c784;
        box-shadow: 0 4px 12px rgba(129, 199, 132, 0.4);
    }

    body.dark-mode .pasta-name {
        color: #f0f0f0;
    }

    body.dark-mode .pasta-products-count {
        color: #aaa;
    }

    body.dark-mode .pastas-divider {
        color: #999;
    }

    body.dark-mode .pastas-divider::before,
    body.dark-mode .pastas-divider::after {
        background: #555;
    }

    body.dark-mode .save-to-pasta-actions .cancel-btn {
        background: #555;
        color: #f0f0f0;
    }

    body.dark-mode .save-to-pasta-actions .cancel-btn:hover {
        background: #666;
    }

    /* Estilo de sucesso para quando produto é salvo */
    .save-to-pasta-panel.success {
        background: linear-gradient(135deg, #d4edda, #c3e6cb);
        border: 2px solid #28a745;
        transform: scale(1.02);
        box-shadow: 0 12px 40px rgba(40, 167, 69, 0.3);
        animation: successPulse 0.6s ease-out;
    }

    @keyframes successPulse {
        0% { 
            transform: scale(1) rotate(0deg);
            box-shadow: 0 8px 32px rgba(40, 167, 69, 0.2);
        }
        50% { 
            transform: scale(1.05) rotate(1deg);
            box-shadow: 0 16px 48px rgba(40, 167, 69, 0.4);
        }
        100% { 
            transform: scale(1.02) rotate(0deg);
            box-shadow: 0 12px 40px rgba(40, 167, 69, 0.3);
        }
    }

    .save-to-pasta-panel.success .save-to-pasta-title {
        color: #155724;
        font-weight: bold;
        position: relative;
    }

    .save-to-pasta-panel.success .save-to-pasta-title::before {
        content: "✅ ";
        font-size: 1.2em;
        margin-right: 8px;
        animation: bounceIn 0.8s ease-out;
    }

    @keyframes bounceIn {
        0% { 
            transform: scale(0) rotate(180deg);
            opacity: 0;
        }
        50% { 
            transform: scale(1.3) rotate(0deg);
            opacity: 1;
        }
        100% { 
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
    }

    .save-to-pasta-panel.success .save-to-pasta-subtitle {
        color: #0f5132;
        font-weight: 500;
    }

    .save-to-pasta-panel.success .pasta-option {
        pointer-events: none;
        opacity: 0.7;
        background: rgba(40, 167, 69, 0.1);
        border-color: rgba(40, 167, 69, 0.3);
    }

    .save-to-pasta-panel.success .pasta-option.selected {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
        border-color: #28a745;
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
        animation: selectedGlow 1s ease-in-out;
    }

    @keyframes selectedGlow {
        0%, 100% { 
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
        }
        50% { 
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.6);
        }
    }

    .save-to-pasta-panel.success .pasta-option.selected .pasta-name {
        color: white;
        font-weight: bold;
    }

    .save-to-pasta-panel.success .pasta-option.selected .pasta-products-count {
        color: rgba(255, 255, 255, 0.9);
    }

    /* Dark mode para estilo de sucesso */
    body.dark-mode .save-to-pasta-panel.success {
        background: linear-gradient(135deg, #1e4a2e, #2e5a3e);
        border-color: #28a745;
    }

    body.dark-mode .save-to-pasta-panel.success .save-to-pasta-title {
        color: #a7d4b5;
    }

    body.dark-mode .save-to-pasta-panel.success .save-to-pasta-subtitle {
        color: #8fb89d;
    }

    body.dark-mode .save-to-pasta-panel.success .pasta-option {
        background: rgba(40, 167, 69, 0.15);
        border-color: rgba(40, 167, 69, 0.4);
    }

    body.dark-mode .save-to-pasta-panel.success .pasta-option.selected {
        background: linear-gradient(135deg, #2e7d32, #388e3c);
        border-color: #4caf50;
    }

    /* Layout vertical para pastas maiores */
    .folder-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: flex-start;
        align-items: stretch;
        margin: 32px auto 0 auto;
        max-width: 800px;
        width: 100%;
        padding: 0 16px;
    }
    @media (max-width: 700px) {
      .folders-list { padding: 0 2vw; }
    }
    @media (max-width: 600px) {
      .main-title { font-size: 1.2em; }
      .no-products-msg { padding: 12px 2vw; }
      .add-folder-btn { padding: 8px 2vw; font-size: 0.98em; }
      .product-card { min-width: 120px; max-width: 100%; }
    }
    /* Verify page styles */
    .verify-container {
      max-width: 400px;
      margin: 60px auto 0 auto;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 16px #0001;
      padding: 32px 24px 24px 24px;
      text-align: center;
    }
    .verify-container h2 {
      margin-top: 0;
      color: #c00;
    }
    .verify-message {
      font-size: 1.1em;
      margin-bottom: 24px;
      color: #444;
    }
    .code-inputs {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 24px;
    }
    .code-inputs input {
      width: 40px;
      height: 48px;
      font-size: 2em;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 6px;
      outline: none;
      transition: border 0.2s;
    }
    .code-inputs input:focus {
      border: 2px solid #c00;
    }
    .verify-btn {
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 12px 36px;
      font-size: 1.1em;
      font-weight: bold;
      cursor: pointer;
      margin-bottom: 10px;
    }
    .resend-link {
      display: block;
      margin-top: 18px;
      color: #c00;
      text-decoration: underline;
      cursor: pointer;
      font-size: 0.98em;
    }
    .success-message {
      color: #090;
      margin-top: 18px;
      font-weight: bold;
    }
    .error-message {
      color: #c00;
      margin-top: 18px;
      font-weight: bold;
    }
    @media (max-width: 500px) {
      .verify-container { padding: 18px 4vw; }
      .code-inputs input { width: 32px; height: 38px; font-size: 1.3em; }
    }
    /* User Settings Page Styles */
    .white-container {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
      padding: 36px 32px 32px 32px;
      max-width: 480px;
      width: 100%;
      margin: 0 auto;
      transition: background 0.3s;
    }
    @media (max-width: 600px) {
      .white-container {
        padding: 16px 6vw 18px 6vw;
        max-width: 98vw;
      }
    }
    body.dark-mode .white-container {
      background: #2a0505;
    }
    .user-settings-form {
      width: 100%;
      max-width: 420px;
      background: none;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      color: inherit;
    }
    .username-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
    }
    .username-label {
      font-weight: bold;
      margin-right: 6px;
    }
    .username-value {
      font-size: 1.08em;
      color: #c00;
      font-weight: bold;
    }
    .edit-username-btn {
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 16px;
      padding: 6px 16px;
      font-size: 0.98em;
      font-weight:#ff0000 64, 64;
      cursor: pointer;
      transition: background 0.2s;
    }
    .edit-username-btn:hover {
      background: #ff8d30;
    }
    .edit-username-field {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .edit-username-field input[type="text"] {
      padding: 7px 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 1em;
    }
    .save-username-btn, .cancel-username-btn {
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 14px;
      padding: 6px 14px;
      font-size: 0.95em;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.2s;
    }
    .save-username-btn:hover {
      background: #ff8d30;
    }
    .cancel-username-btn {
      background: #aaa;
      margin-left: 4px;
    }
    .cancel-username-btn:hover {
      background: #888;
    }
    .password-fields {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 18px;
    }
    .password-fields label {
      font-weight: bold;
      margin-bottom: 2px;
    }
    .password-fields input[type="password"] {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 1em;
      background: #f9f9f9;
    }
    .change-password-btn {
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 12px 0;
      font-size: 1.1em;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.2s;
      letter-spacing: 1px;
      width: 100%;
      margin-bottom: 18px;
    }
    .change-password-btn:hover {
      background: #ff8d30;
    }
    .delete-account-btn {
      background: #900;
      color: #fff;
      border-radius: 24px;
      padding: 12px 0;
      font-size: 1.05em;
      font-weight: bold;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
      width: 100%;
    }
    .delete-account-btn:hover {
      background: #c00;
    }
            .logout-btn {
            margin: 16px 0;
            padding: 8px 20px;
            background: #e74c3c;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .logout-btn:hover {
            background: #c0392b;
        }
    @media (max-width: 600px) {
      main {
        padding: 18px 0 18px 0;
      }
      .user-settings-form {
        max-width: 98vw;
      }
      .username-row, .edit-username-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }
    }
    body.dark-mode .user-settings-form input,
    body.dark-mode .user-settings-form input[type="password"] {
      background: #1a0101;
      color: #f0f0f0;
      border: 1px solid #900;
    }
    body.dark-mode .change-password-btn,
    body.dark-mode .delete-account-btn,
    body.dark-mode .edit-username-btn,
    body.dark-mode .save-username-btn {
      background: #900;
      color: #fff;
    }
    body.dark-mode .change-password-btn:hover,
    body.dark-mode .save-username-btn:hover {
      background: #ff8d30;
      color: #fff;
    }
    body.dark-mode .delete-account-btn:hover {
      background: #c00;
      color: #fff;
    }
    body.dark-mode .cancel-username-btn {
      background: #555;
    }
    body.dark-mode .cancel-username-btn:hover {
      background: #888;
    }
    /* Página de pastas personalizada */
    .folders-list {
      width: 100%;
      max-width: 700px;
      margin-top: 24px;
      padding: 0;
    }
    .folder {
      background: #ffe0e0;
      border-radius: 8px;
      margin-bottom: 18px;
      padding: 16px 18px 10px 18px;
      box-shadow: 0 1px 6px #0001;
    }
    body.dark-mode .folder {
      background: #2a0a0a;
    }
    .folder-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .folder-header input[type="text"] {
      font-size: 1.1em;
      border: none;
      background: transparent;
      font-weight: bold;
      width: 180px;
      outline: none;
      color: inherit;
    }
    .folder-header .folder-actions button {
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 4px 10px;
      margin-left: 6px;
      cursor: pointer;
      font-size: 0.95em;
    }
    .products-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 8px;
    }
    .product-card {
      background: #fff9f0;
      border: 1px solid #ffd6b3;
      border-radius: 6px;
      padding: 10px 14px;
      min-width: 180px;
      max-width: 260px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 1px 4px #0001;
      position: relative;
    }
    body.dark-mode .product-card {
      background: #3a1818;
      border-color: #a44;
    }
    .product-card .remove-btn {
      position: absolute;
      top: 6px;
      right: 6px;
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 1em;
      cursor: pointer;
      line-height: 1;
    }
    @media (max-width: 700px) {
      .folders-list { padding: 0 2vw; }
    }
    @media (max-width: 600px) {
      .main-title { font-size: 1.2em; }
      .no-products-msg { padding: 12px 2vw; }
      .add-folder-btn { padding: 8px 2vw; font-size: 0.98em; }
      .product-card { min-width: 120px; max-width: 100%; }
    }
    /* Painel flutuante */
    .modal-bg {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0; top: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.35);
      justify-content: center;
      align-items: center;
    }
    .modal-bg.active { display: flex; }
    .modal-panel {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 32px #0003;
      padding: 32px 28px 24px 28px;
      min-width: 320px;
      max-width: 90vw;
      color: #222;
      position: relative;
    }
    .modal-panel h2 {
      margin-top: 0;
      margin-bottom: 18px;
      font-size: 1.4em;
      text-align: center;
    }
    .modal-panel label { display: block; margin: 12px 0 4px 0; }
    .modal-panel input[type="text"], .modal-panel select, .modal-panel input[type="file"] {
      width: 100%;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-size: 1em;
      margin-bottom: 10px;
    }
    .modal-panel .modal-actions {
      text-align: right;
      margin-top: 18px;
    }
    .modal-panel button {
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 18px;
      font-weight: bold;
      cursor: pointer;
      font-size: 1em;
      margin-left: 8px;
    }
    .modal-panel button.cancel-btn {
      background: #888;
    }
    
    /* Dropdown de categoria da postagem */
    .modal-panel #postCategory {
      background: #f9f9f9;
      border: 1px solid #ddd;
      cursor: pointer;
    }
    
    .modal-panel #postCategory:focus {
      outline: none;
      border-color: #c00;
      box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.1);
    }
    
    /* Pastas criadas */
    .folders-container {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: center;
      align-items: flex-start;
      margin-bottom: 32px;
      margin-top: 32px;
      min-height: 100px;
      position: relative;
      z-index: 0;
    }
    .folder-box {
      width: 140px;
      height: 100px;
      background: #fff9c4;
      border-radius: 14px;
      box-shadow: 0 2px 10px #0001;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 0;
      cursor: grab;
      position: relative;
      user-select: none;
      transition: box-shadow 0.2s, background 0.2s;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .folder-box.dragging {
      opacity: 0.7;
      box-shadow: 0 8px 32px #0003;
      z-index: 10;
    }
    .folder-box img {
      display: none;
    }
    .folder-title {
      font-weight: bold;
      text-align: center;
      font-size: 1.1em;
      word-break: break-word;
      width: 100%;
      padding: 8px 8px 10px 8px;
      border-radius: 0 0 14px 14px;
      margin-top: auto;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      
      /* Sistema inteligente de contraste */
      color: #ffffff;
      text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 2px rgba(0, 0, 0, 1);
      
      /* Gradiente sutil para melhor legibilidade */
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        transparent 100%
      );
    }
    
    /* Pseudo-elemento para criar o blur progressivo como no Bublup */
    .folder-box::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: inherit;
      background-size: inherit;
      background-position: inherit;
      border-radius: inherit;
      z-index: 1;
      
      /* Máscara de gradiente para blur progressivo */
      mask: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 30%,
        rgba(0, 0, 0, 0.4) 60%,
        transparent 100%
      );
      -webkit-mask: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 30%,
        rgba(0, 0, 0, 0.4) 60%,
        transparent 100%
      );
      
      /* Blur progressivo - mais forte embaixo */
      filter: blur(8px) saturate(1.3);
      -webkit-filter: blur(8px) saturate(1.3);
    }
    
    /* Variação para fundos claros */
    .folder-title.light-bg {
      color: #1a1a1a;
      text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.9),
        0 0 16px rgba(255, 255, 255, 0.7),
        0 2px 4px rgba(255, 255, 255, 0.8),
        0 0 2px rgba(255, 255, 255, 1);
      
      background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
      );
    }
    
    /* Variação para fundos médios */
    .folder-title.medium-bg {
      color: #ffffff;
      text-shadow: 
        0 0 6px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(0, 0, 0, 0.7),
        0 1px 3px rgba(0, 0, 0, 1),
        0 0 1px rgba(255, 255, 255, 0.3);
      
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        transparent 100%
      );
    }
    /* Botão de deletar pasta */
    .delete-folder-btn {
      position: absolute;
      top: 6px;
      right: 8px;
      width: 26px;
      height: 26px;
      background: #c00;
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 1.3em;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
      transition: opacity 0.18s;
      box-shadow: 0 2px 8px #0002;
      padding: 0;
      line-height: 1;
      pointer-events: none;
    }
    .folder-box:hover .delete-folder-btn {
      opacity: 1;
      pointer-events: auto;
    }
    .delete-folder-btn:active {
      background: #900;
    }
    
    /* 🎨 EFEITO HOVER ELEGANTE PARA USUÁRIOS NÃO-ADMIN */
    .folder-box-user:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .folder-box-user {
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Para modo escuro */
    body.dark-mode .folder-box-user:hover {
      box-shadow: 0 8px 25px rgba(255,255,255,0.1);
    }
    
    /* 🎨 EFEITO HOVER ELEGANTE PARA POSTS DE USUÁRIOS NÃO-ADMIN */
    .post-box-user:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .post-box-user {
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Para modo escuro */
    body.dark-mode .post-box-user:hover {
      box-shadow: 0 8px 25px rgba(255,255,255,0.1);
    }
    
    /* NOVOS BOTÕES */
    .save-btn {
      display: block;
      margin: 0 auto 16px auto;
      background: #ff8d30;
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 12px 36px;
      font-size: 1.1em;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s;
      box-shadow: 0 2px 12px #0001;
      letter-spacing: 1px;
    }
    .save-btn:hover {
      background: #c00;
    }
    .add-btn {
      display: block;
      margin: 0 auto 32px auto;
      background: #2ecc40;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      font-size: 3em;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 2px 12px #0002;
      transition: background 0.2s;
      line-height: 80px;
      position: relative;
      z-index: 1;
    }
    .add-btn:hover {
      background: #27ae36;
    }

    /* Botão de status específico */
    .status-btn {
      background-color: #17a2b8 !important;
      margin-left: 10px;
    }

    /* Botão de limpar cache específico */
    .clear-btn {
      background-color: #dc3545 !important;
      margin-left: 10px;
      transition: all 0.3s ease;
    }

    .clear-btn:hover {
      background-color: #c82333 !important;
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    .clear-btn:active {
      transform: scale(0.95);
    }

    /* Dica no modal */
    .modal-panel .file-hint {
      color: #666;
      font-size: 12px;
      display: block;
      margin-top: 5px;
      line-height: 1.4;
    }

    body.dark-mode .modal-panel .file-hint {
      color: #aaa;
    }
    
    /* Dropdown de categoria no modo escuro */
    body.dark-mode .modal-panel #postCategory {
      background: #333;
      border-color: #555;
      color: #e8e8e8;
    }
    
    body.dark-mode .modal-panel #postCategory:focus {
      border-color: #ff6b6b;
      box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.1);
    }

    /* Opções de imagem no modal */
    .image-input-options {
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      background: #f9f9f9;
    }

    body.dark-mode .image-input-options {
      background: #333;
      border-color: #555;
    }

    .image-option {
      margin-bottom: 15px;
    }

    .image-option:last-child {
      margin-bottom: 0;
    }

    .image-option input[type="radio"] {
      margin-right: 8px;
    }

    .image-option label {
      font-weight: bold;
      display: inline-block;
      margin-bottom: 5px;
      cursor: pointer;
    }

    .image-option input[type="file"],
    .image-option input[type="url"] {
      width: 100%;
      margin-top: 5px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }

    body.dark-mode .image-option input[type="file"],
    body.dark-mode .image-option input[type="url"] {
      background: #444;
      border-color: #666;
      color: #f0f0f0;
    }

    .image-option input[type="url"]:disabled {
      background: #f5f5f5;
      color: #999;
      cursor: not-allowed;
    }

    body.dark-mode .image-option input[type="url"]:disabled {
      background: #2a2a2a;
      color: #666;
    }

        .floating-btn {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1001;
            background: #2ecc40;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            font-size: 2.8em;
            font-weight: bold;
            box-shadow: 0 2px 16px #0002;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .floating-btn:active {
            background: #27ae38;
        }
        .editor-panel, .final-post, .edit-btn {
            display: none;
        }
        .editor-panel.active {
            display: block;
        }
        .final-post.active {
            display: block;
        }
        body.dark-mode .final-post:not(.post-container .final-post) {
             background: #ffe7be;
        }
        .edit-btn {
            display: inline-block;
            margin-top: 18px;
            background: #2ecc40;
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 10px 32px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
        }
        .edit-btn:hover {
            background: #27ae38;
        }
        .editor-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        .editor-toolbar button, .editor-toolbar select, .editor-toolbar input[type="color"] {
            background: #ff8d30;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 7px 12px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
        }
        .editor-toolbar button:hover, .editor-toolbar select:hover {
            background: #c00;
        }
        .editor-toolbar input[type="color"] {
            padding: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid #ff8d30;
            cursor: pointer;
            vertical-align: middle;
        }
        .editor-toolbar input[type="file"] {
            display: none;
        }
        .editor-toolbar .insert-link-popup {
            display: none;
            position: absolute;
            background: #fff;
            border: 1px solid #ff8d30;
            border-radius: 8px;
            padding: 10px 14px;
            z-index: 1002;
            box-shadow: 0 2px 12px #0002;
            left: 50%;
            top: 60px;
            transform: translateX(-50%);
        }
        .editor-toolbar .insert-link-popup input[type="text"] {
            width: 220px;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #ccc;
            font-size: 1em;
            margin-right: 8px;
        }
        .editor-toolbar .insert-link-popup button {
            background: #2ecc40;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 7px 12px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
        }
        .editor-toolbar .insert-link-popup button:hover {
            background: #27ae38;
        }
        .editor-content {
            min-height: 180px;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 16px;
            font-size: 1.3em; /* Aumentado de 1.1em para 1.3em */
            background: #fff9c4;
            outline: none;
            margin-bottom: 18px;
            transition: background 0.2s;
        }
        .editor-content:focus {
            background: #fffde7;
            border-color: #ff8d30;
        }
        .editor-actions {
            text-align: right;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        .editor-actions button {
            background: #c00;
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 10px 32px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
            margin-left: 0;
        }
        .editor-actions button.draft-btn {
            background: #ff8d30;
            color: #fff;
        }
        .editor-actions button.draft-btn:hover {
            background: #c00;
        }
        .editor-actions button.send-btn {
            background: #c00;
            color: #fff;
        }
        .editor-actions button.send-btn:hover {
            background: #ff8d30;
        }
        /* Imagens redimensionáveis no editor */
        .editor-content img.resizable {
            resize: both;
            overflow: hidden;
            max-width: 100%;
            height: auto;
            display: inline-block;
            border: 2px dashed #ff8d30;
            border-radius: 6px;
            box-sizing: border-box;
            cursor: nwse-resize;
        }
        /* Alças de redimensionamento */
        .editor-content img.resizable:active, 
        .editor-content img.resizable.selected {
            outline: 2px solid #c00;
        }
        /* Popup de opções de Text Wrap */
        .image-wrap-popup {
            position: absolute;
            background: #fff;
            border: 1px solid #ff8d30;
            border-radius: 8px;
            padding: 10px 14px;
            z-index: 1003;
            box-shadow: 0 2px 12px #0002;
            display: none;
            min-width: 160px;
        }
        .image-wrap-popup button {
            background: #ff8d30;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 7px 12px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            margin: 4px 0;
            width: 100%;
            text-align: left;
            transition: background 0.2s;
        }
        .image-wrap-popup button:hover {
            background: #c00;
        }

/* ===== ESTILOS PARA PASTA2.HTML ===== */
.folder-page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

.folder-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(255, 107, 107, 0.2);
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

.back-button:hover {
    background: linear-gradient(135deg, #ff5252, #e53935);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.back-icon {
    font-size: 1.2em;
    font-weight: bold;
}

.folder-page-title {
    font-size: 2.2em;
    font-weight: 700;
    color: #333;
    margin: 0;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .folder-page-title {
    background: linear-gradient(135deg, #ff8e8e, #ffb3b3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.folder-products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    justify-content: flex-start;
}

.folder-product-card {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    border: 2px solid rgba(255, 107, 107, 0.2);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
}

.folder-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e, #ffb3b3);
}

.folder-product-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: rgba(255, 107, 107, 0.4);
}

body.dark-mode .folder-product-card {
    background: linear-gradient(135deg, #2d1b1b 0%, #3a2222 100%);
    border-color: rgba(170, 68, 68, 0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

body.dark-mode .folder-product-card::before {
    background: linear-gradient(90deg, #cc5555, #dd6666, #ee7777);
}

.product-info {
    padding-right: 40px;
}

.product-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.4;
    word-break: break-word;
}

body.dark-mode .product-title {
    color: #fff;
}

.product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: #fff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
    font-size: 0.95em;
}

.product-link:hover {
    background: linear-gradient(135deg, #66BB6A, #4CAF50);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    text-decoration: none;
}

.link-icon {
    font-size: 1.1em;
}

.remove-product-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #ff5252, #e53935);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.3em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(255, 82, 82, 0.3);
}

.remove-product-btn:hover {
    background: linear-gradient(135deg, #e53935, #c62828);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 82, 82, 0.5);
}

.empty-folder {
    width: 100%;
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
    border-radius: 20px;
    border: 2px dashed #ddd;
}

body.dark-mode .empty-folder {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border-color: #444;
}

.empty-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

.empty-title {
    font-size: 1.8em;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
}

body.dark-mode .empty-title {
    color: #ccc;
}

.empty-subtitle {
    font-size: 1.1em;
    color: #999;
    margin-bottom: 30px;
}

body.dark-mode .empty-subtitle {
    color: #888;
}

.back-to-products {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

.back-to-products:hover {
    background: linear-gradient(135deg, #ff5252, #e53935);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
    text-decoration: none;
}

/* ===== ESTILOS PARA DRAG AND DROP DE POSTS PARA PASTAS ===== */
.folder.accepting-post {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%) !important;
    border: 3px dashed #4CAF50 !important;
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2), 0 8px 25px rgba(0,0,0,0.15) !important;
    animation: pulse-accepting 1.5s infinite;
}

body.dark-mode .folder.accepting-post {
    background: linear-gradient(135deg, #1b2e1b 0%, #2d4a2d 100%) !important;
    border-color: #66BB6A !important;
    box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.3), 0 8px 25px rgba(0,0,0,0.3) !important;
}

@keyframes pulse-accepting {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2), 0 8px 25px rgba(0,0,0,0.15);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(76, 175, 80, 0.4), 0 12px 30px rgba(0,0,0,0.2);
    }
}

/* Dark mode keyframes */
body.dark-mode .folder.accepting-post {
    animation: pulse-accepting-dark 1.5s infinite;
}

@keyframes pulse-accepting-dark {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.3), 0 8px 25px rgba(0,0,0,0.3);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(102, 187, 106, 0.5), 0 12px 30px rgba(0,0,0,0.4);
    }
}

/* Melhoria na aparência quando posts estão sendo arrastados */
.saved-post-mini.dragging {
    transform: rotate(-2deg) scale(0.95);
    opacity: 0.8;
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Cursor personalizado durante drag */
.saved-post-mini[draggable="true"] {
    cursor: grab;
}

.saved-post-mini[draggable="true"]:active {
    cursor: grabbing;
}

/* Notificação de sucesso para drag and drop */
.drop-success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 300px;
    transform: translateX(350px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.drop-success-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.drop-success-notification .success-icon {
    font-size: 1.5em;
    flex-shrink: 0;
}

.drop-success-notification .success-text {
    font-size: 0.95em;
    line-height: 1.4;
}

.drop-success-notification .success-text strong {
    font-weight: 600;
}

body.dark-mode .drop-success-notification {
    background: linear-gradient(135deg, #388E3C, #4CAF50);
    box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4);
}

/* ===== FIM DOS ESTILOS PARA DRAG AND DROP ===== */

/* Responsividade para pasta2.html */
@media (max-width: 768px) {
    .folder-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .folder-page-title {
        font-size: 1.8em;
    }
    
    .folder-products-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .folder-product-card {
        padding: 20px;
    }
    
    .product-title {
        font-size: 1.2em;
    }
    
    .empty-folder {
        padding: 40px 20px;
    }
    
    .empty-icon {
        font-size: 3em;
    }
    
    .empty-title {
        font-size: 1.5em;
    }
}

/* ===== FIM DOS ESTILOS PARA PASTA2.HTML ===== */

    @media (max-width: 900px) {
      header { flex-direction:column; align-items:stretch; gap:10px 0; }
      header > div, header > form { justify-content:center; margin-bottom:6px; }
      header form { margin:10px 0; }
      header > div[style*="flex:0 0 64px;"] { display:none; }
      .suggestion-btn { padding: 14px 4vw; font-size: 1.1em; }
      .save-btn { padding: 10px 2vw; font-size: 1em; }
      .add-btn { width: 60px; height: 60px; font-size: 2em; line-height: 60px; }
      .folders-container { gap: 14px; }
      .folder-box { width: 100px; height: 100px; }
      .delete-folder-btn { width: 20px; height: 20px; font-size: 1em; top: 4px; right: 4px; }
      .posts-container { max-width: 98vw; gap: 16px; justify-content: center; }
      .saved-post-mini { width: 180px; min-width: 160px; max-width: 200px; }
      .post-img { width: 48px; height: 48px; }
      .post-box { height: 120px; }
      .delete-post-btn { width: 22px; height: 22px; font-size: 1em; top: 6px; right: 6px; }
      .add-bg-btn { padding: 8px 2vw; font-size: 0.95em; }
      .save-post-btn { top: 6px; right: 32px; font-size: 0.9em; padding: 5px 12px; }
      .editor-panel { padding: 16px 4vw; }
      .editor-toolbar button, .editor-toolbar select { font-size: 0.95em; padding: 6px 8px; }
      .editor-content { padding: 10px; font-size: 1em; }
      .editor-actions button { padding: 8px 2vw; font-size: 1em; }
      .floating-btn { width: 60px; height: 60px; font-size: 2em; }
      .editor-toolbar .insert-link-popup input[type="text"] { width: 120px; }
      header .header-links .user-info { padding: 10px 12px; font-size: 1em; }
    }
    @media (max-width: 600px) {
      header { padding:12px 2vw; }
      header h1 { font-size:1.2em; }
      header form input { max-width:120px; }
      header > div, header > form { flex-direction:column; align-items:center; gap:8px; }
      .suggestions-panel { padding: 16px 4vw; }
      .suggestion-btn { padding: 10px 2vw; font-size: 1em; }
      .save-btn { padding: 8px 2vw; font-size: 0.95em; }
      .add-btn { width: 48px; height: 48px; font-size: 1.5em; line-height: 48px; }
      .folders-container { gap: 8px; }
      .folder-box { width: 70px; height: 70px; }
      .delete-folder-btn { width: 16px; height: 16px; font-size: 0.9em; top: 2px; right: 2px; }
      .posts-container { max-width: 100vw; gap: 12px; justify-content: center; }
      .saved-post-mini { width: 160px; min-width: 140px; max-width: 180px; }
      .post-img { width: 36px; height: 36px; }
      .post-box { height: 80px; }
      .delete-post-btn { width: 16px; height: 16px; font-size: 0.9em; top: 2px; right: 2px; }
      .add-bg-btn { padding: 6px 2vw; font-size: 0.9em; }
      .save-post-btn { top: 2px; right: 20px; font-size: 0.85em; padding: 3px 8px; }
      .editor-panel { padding: 8px 2vw; }
      .editor-toolbar { gap: 4px; }
     .editor-content { padding: 6px; font-size: 0.95em; }
     .editor-actions button { padding: 6px 2vw; font-size: 0.95em; }
     .floating-btn { width: 48px; height: 48px; font-size: 1.5em; }
     .editor-toolbar .insert-link-popup input[type="text"] { width: 80px; }
      header .header-links .user-info { padding: 8px 8px; font-size: 0.98em; }
    }

/* ===== PÁGINA DE BUSCA / RESULTADOS ===== */
.search-page-main {
  padding: 40px 6vw;
  max-width: 1200px;
  margin: 0 auto;
  flex: 1;
}

.search-title {
  text-align: center;
  margin-bottom: 40px;
}

.search-title h2 {
  color: #333;
  font-size: 1.8em;
  margin: 0;
  font-weight: 600;
}

.search-results-container {
  max-width: 100%;
}

.search-section {
  margin-bottom: 50px;
}

.search-section h3 {
  color: #444;
  font-size: 1.4em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
  font-weight: 600;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.search-result-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  gap: 16px;
  align-items: center;
  border: 2px solid transparent;
}

.search-result-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #ff6b35;
}

.result-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-image .no-image {
  font-size: 2em;
  color: #999;
}

.result-content {
  flex: 1;
  min-width: 0;
}

.result-title {
  font-size: 1.2em;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-source {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 4px;
}

.result-type {
  color: #ff6b35;
  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.folder-result {
  border-left: 4px solid #4CAF50;
}

.post-result {
  border-left: 4px solid #2196F3;
}

.product-result {
  border-left: 4px solid #FF9800;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.no-results-icon {
  font-size: 4em;
  margin-bottom: 20px;
}

.no-results-title {
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.no-results-subtitle {
  font-size: 1.1em;
  color: #777;
  line-height: 1.4;
}

/* Dark mode para busca */
body.dark-mode .search-title h2 {
  color: #f0f0f0;
}

body.dark-mode .search-section h3 {
  color: #e0e0e0;
  border-bottom-color: #444;
}

body.dark-mode .search-result-item {
  background: rgba(51, 51, 51, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .search-result-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: #ff8d30;
}

body.dark-mode .result-image {
  background: #444;
}

body.dark-mode .result-image .no-image {
  color: #bbb;
}

body.dark-mode .result-title {
  color: #f0f0f0;
}

body.dark-mode .result-source {
  color: #bbb;
}

body.dark-mode .result-type {
  color: #ff8d30;
}

body.dark-mode .no-results {
  color: #bbb;
}

body.dark-mode .no-results-title {
  color: #f0f0f0;
}

body.dark-mode .no-results-subtitle {
  color: #999;
}

/* Responsividade para busca */
@media (max-width: 768px) {
  .search-page-main {
    padding: 20px 4vw;
  }
  
  .search-results-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .search-result-item {
    padding: 12px;
    gap: 12px;
  }
  
  .result-image {
    width: 60px;
    height: 60px;
  }
  
  .result-title {
    font-size: 1.1em;
  }
  
  .search-title h2 {
    font-size: 1.5em;
  }
  
  .search-section h3 {
    font-size: 1.2em;
  }
}

/* ===== ESTILOS ESPECÍFICOS PARA BUSCA ===== */
.search-folder-result,
.search-post-result,
.search-product-result {
  cursor: pointer !important;
  transition: all 0.3s ease;
}

.search-folder-result:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.search-post-result:hover,
.search-product-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Responsividade para busca */
@media (max-width: 768px) {
  .search-page-main {
    padding: 20px 4vw;
  }
  
  .search-title h2 {
    font-size: 1.5em;
  }
  
  .search-section h3 {
    font-size: 1.2em;
  }
}

/* ===== ESTILOS ESPECÍFICOS PARA RECUPERAR SENHA ===== */
/* Estilos específicos para a página de recuperação */
.password-reset-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 30px;
    background: var(--bg-color, white);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.password-reset-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color, #333);
}

.password-reset-description {
    text-align: center;
    margin-bottom: 25px;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

.back-to-login {
    text-align: center;
    margin-top: 20px;
}

.back-to-login a {
    color: #ff6b35;
    text-decoration: none;
    font-weight: bold;
}

.back-to-login a:hover {
    text-decoration: underline;
}

.back-to-login-btn {
    display: none;
    margin-top: 15px;
    padding: 10px 20px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.back-to-login-btn:hover {
    background: #218838;
}

/* Dark mode para recuperar senha */
.dark-mode .password-reset-container {
    background: #2a0505;
    border-color: #555;
}

.dark-mode .password-reset-title,
.dark-mode .form-group label {
    color: white;
}

.dark-mode .password-reset-description {
    color: #ccc;
}

/* ===== NOTIFICAÇÕES ESTILIZADAS ===== */
.styled-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.styled-notification {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    min-width: 320px;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.styled-notification.show {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.styled-notification.success {
    border-left: 5px solid #4caf50;
}

.styled-notification.error {
    border-left: 5px solid #f44336;
}

.styled-notification.warning {
    border-left: 5px solid #ff9800;
}

.styled-notification.info {
    border-left: 5px solid #2196f3;
}

.notification-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-message {
    flex-grow: 1;
    font-size: 1.1em;
    line-height: 1.5;
    color: #333;
    font-weight: 500;
}

.notification-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    line-height: 1;
}

.notification-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #666;
}

/* Dark mode para notificações */
.styled-notification.dark-mode {
    background: #2d2d2d;
    color: #f0f0f0;
}

.styled-notification.dark-mode .notification-message {
    color: white;
}

.styled-notification.dark-mode .notification-close {
    color: #ccc;
}

.styled-notification.dark-mode .notification-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.styled-notification.dark-mode.success {
    border-left-color: #66bb6a;
}

.styled-notification.dark-mode.error {
    border-left-color: #ef5350;
}

.styled-notification.dark-mode.warning {
    border-left-color: #ffa726;
}

.styled-notification.dark-mode.info {
    border-left-color: #42a5f5;
}

/* ----- Painel Gist (GitHub) ----- */
.gist-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 10000;
}

.gist-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding: 20px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .gist-panel {
    background: #2a0505;
    color: white;
}

.gist-panel h3 {
    margin: 0 0 15px 0;
    color: #d32f2f;
    text-align: center;
}

.dark-mode .gist-panel h3 {
    color: #ff6b6b;
}

.gist-panel input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.dark-mode .gist-panel input {
    background: #1a0303;
    border-color: #ff6b6b;
    color: white;
}

.gist-panel-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.gist-panel button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.gist-panel button.load {
    background: #d32f2f;
    color: white;
}

.gist-panel button.load:hover {
    background: #b71c1c;
}

.gist-panel button.cancel {
    background: #666;
    color: white;
}

.gist-panel button.cancel:hover {
    background: #555;
}

.dark-mode .gist-panel button.load {
    background: #ff6b6b;
    color: #000;
}

.dark-mode .gist-panel button.load:hover {
    background: #ff8a80;
}

.dark-mode .gist-panel button.cancel {
    background: #444;
}

.dark-mode .gist-panel button.cancel:hover {
    background: #555;
}

/* ----- Fim Painel Gist ----- */

/* ----- Painel de Opções de Post ----- */
.post-options-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.post-options-panel {
    background: white;
    border-radius: 15px;
    padding: 30px;
    width: 500px;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInScale 0.3s ease-out;
}

.dark-mode .post-options-panel {
    background: #2a0505;
    color: white;
}

.post-options-header h3 {
    margin: 0 0 25px 0;
    color: #d32f2f;
    text-align: center;
    font-size: 1.3em;
}

.dark-mode .post-options-header h3 {
    color: #ff6b6b;
}

.post-options-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.option-btn {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #f9f9f9;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.option-btn:hover {
    border-color: #d32f2f;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.2);
}

.dark-mode .option-btn {
    background: #1a0303;
    border-color: #444;
    color: white;
}

.dark-mode .option-btn:hover {
    border-color: #ff6b6b;
    background: #2a0505;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2);
}

.option-icon {
    font-size: 2em;
    margin-right: 15px;
    width: 60px;
    text-align: center;
}

.option-text strong {
    display: block;
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #d32f2f;
}

.dark-mode .option-text strong {
    color: #ff6b6b;
}

.option-text small {
    color: #666;
    font-size: 0.9em;
}

.dark-mode .option-text small {
    color: #ccc;
}

.post-options-info {
    text-align: center;
    padding: 15px;
    background: #f0f0f0;
    border-radius: 8px;
    margin-top: 20px;
}

.dark-mode .post-options-info {
    background: #1a0303;
}

.post-options-info small {
    color: #666;
}

.dark-mode .post-options-info small {
    color: #ccc;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ----- Fim Painel de Opções ----- */

/* ----- Indicador de Gist ----- */
.gist-indicator {
    display: none; /* Ocultar barra informativa */
    margin-bottom: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #f9f9f9;
    overflow: hidden;
}

.dark-mode .gist-indicator {
    border-color: #444;
    background: #1a0303;
}

.gist-info {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 12px;
}

.gist-icon {
    font-size: 1.5em;
    color: #666;
}

.dark-mode .gist-icon {
    color: #ccc;
}

.gist-details {
    flex: 1;
}

.gist-details strong {
    display: block;
    color: #d32f2f;
    font-size: 1em;
    margin-bottom: 3px;
}

.dark-mode .gist-details strong {
    color: #ff6b6b;
}

.gist-details small {
    color: #666;
    font-size: 0.85em;
}

.dark-mode .gist-details small {
    color: #ccc;
}

.gist-reload,
.gist-remove {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 8px;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.gist-reload:hover {
    background: rgba(76, 175, 80, 0.1);
}

.gist-remove:hover {
    background: rgba(244, 67, 54, 0.1);
}

.dark-mode .gist-reload:hover {
    background: rgba(76, 175, 80, 0.2);
}

.dark-mode .gist-remove:hover {
    background: rgba(244, 67, 54, 0.2);
}

/* ----- Fim Indicador de Gist ----- */

/* ----- Botão Atualizar Gist ----- */
.gist-refresh-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #d32f2f;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.2em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
    display: none; /* Oculto por padrão */
}

.gist-refresh-btn:hover {
    background: #b71c1c;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.gist-refresh-btn:active {
    transform: scale(0.95);
}

.dark-mode .gist-refresh-btn {
    background: #ff6b6b;
    color: #000;
}

.dark-mode .gist-refresh-btn:hover {
    background: #ff8a80;
}

.gist-refresh-btn.loading {
    animation: spin 1s linear infinite;
    pointer-events: none;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ----- Fim Botão Atualizar Gist ----- */

/* ----- Sistema de Administração ----- */
.admin-only {
    display: none !important; /* Oculto por padrão */
}

.admin-badge {
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #8B0000;
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode .admin-badge {
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #8B0000;
}

/* Quando admin está logado, mostrar elementos */
body.admin-logged .admin-only {
    display: block !important;
}

body.admin-logged .add-btn.admin-only {
    display: flex !important; /* Para o botão + que usa flex */
}

/* 🚫 MENSAGEM DE ESPERA PARA USUÁRIOS NÃO-ADMIN (POST.HTML) */
.user-waiting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
}

.user-waiting-panel {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 500px;
    margin: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: waitingSlideIn 0.6s ease;
}

.user-waiting-panel.dark-mode {
    background: #2d2d2d;
    color: #fff;
}

@keyframes waitingSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.waiting-animation {
    margin-bottom: 30px;
}

.chef-icon {
    font-size: 80px;
    margin-bottom: 15px;
    animation: chefBounce 2s infinite ease-in-out;
}

@keyframes chefBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.cooking-dots {
    font-size: 24px;
    font-weight: bold;
    color: #ff6b35;
}

.cooking-dots span {
    animation: cookingDot 1.4s infinite ease-in-out both;
}

.cooking-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.cooking-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes cookingDot {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.waiting-message h3 {
    font-size: 28px;
    margin: 0 0 15px 0;
    color: #ff6b35;
    font-weight: bold;
}

.user-waiting-panel.dark-mode .waiting-message h3 {
    color: #ff8c42;
}

.waiting-message p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 15px 0;
    color: #666;
}

.user-waiting-panel.dark-mode .waiting-message p {
    color: #ccc;
}

.waiting-message small {
    font-size: 14px;
    color: #999;
    font-style: italic;
}

.user-waiting-panel.dark-mode .waiting-message small {
    color: #aaa;
}

.waiting-actions {
    margin-top: 30px;
}

.back-btn {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.back-btn:active {
    transform: translateY(0);
}

/* ----- Fim Sistema de Administração ----- */

/* 🎉 PAINEL DE SUCESSO PARA CADASTRO */
.success-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.success-panel {
    background: var(--bg-color, white);
    border: 2px solid #4CAF50;
    border-radius: 12px;
    padding: 32px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    color: var(--text-color, black);
    position: relative;
    animation: slideInUp 0.4s ease-out;
}

/* Adaptação para modo escuro */
.dark-mode .success-panel {
    background: #2a2a2a;
    color: white;
    border-color: #4CAF50;
}

/* Título do painel de sucesso em modo escuro - SEMPRE BRANCO */
.dark-mode .success-panel .success-title {
    color: white;
}

/* Mensagem do painel de sucesso em modo escuro - SEMPRE BRANCA */
.dark-mode .success-panel .success-message {
    color: white;
}

.success-panel .success-icon {
    width: 64px;
    height: 64px;
    background: #4CAF50;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    animation: bounceIn 0.6s ease-out 0.2s both;
}

.success-panel .success-title {
    font-size: 1.4em;
    font-weight: bold;
    color: #4CAF50;
    margin-bottom: 12px;
}

.success-panel .success-message {
    margin-bottom: 20px;
    line-height: 1.6;
    color: var(--text-color, #333);
}

.success-panel .success-info {
    background: #f0f8ff;
    border: 1px solid #4CAF50;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 24px;
    font-size: 0.9em;
    color: #2e7d32;
}

.dark-mode .success-panel .success-info {
    background: rgba(76, 175, 80, 0.1);
    color: #81c784;
}

.success-panel .continue-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    transition: all 0.3s ease;
    width: 100%;
}

.success-panel .continue-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Animações para o painel de sucesso */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from { 
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounceIn {
    0% { 
        opacity: 0;
        transform: scale(0.3);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}
/* ----- Fim Painel de Sucesso ----- */

/* 🎨 PAINÉIS FLUTUANTES PARA USUARIO.HTML */

/* Painel base para todas as notificações */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.notification-panel {
    background: var(--bg-color, white);
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    color: var(--text-color, black);
    position: relative;
    animation: slideInUp 0.4s ease-out;
}

/* Adaptação para modo escuro */
.dark-mode .notification-panel {
    background: #2a2a2a;
    color: white;
}

/* Títulos dos painéis em modo escuro - SEMPRE BRANCOS */
.dark-mode .notification-panel.success .notification-title {
    color: white;
}

.dark-mode .notification-panel.error .notification-title {
    color: white;
}

.dark-mode .notification-panel.warning .notification-title {
    color: white;
}

.dark-mode .notification-panel.info .notification-title {
    color: white;
}

.dark-mode .notification-panel.confirm .notification-title {
    color: white;
}

/* Mensagens dos painéis em modo escuro - SEMPRE BRANCAS */
.dark-mode .notification-panel .notification-message {
    color: white;
}

/* 🚪 PAINEL DE CONFIRMAÇÃO DE LOGOUT */
.logout-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.logout-panel {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    animation: slideInUp 0.4s ease-out;
    border: 2px solid #ff5722;
}

/* Adaptação para modo escuro */
.dark-mode .logout-panel {
    background: #2a2a2a;
    color: white;
    border-color: #ff5722;
}

.logout-panel .logout-icon {
    width: 48px;
    height: 48px;
    background: #ff5722;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    animation: bounceIn 0.6s ease-out 0.2s both;
}

.logout-panel .logout-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #ff5722;
    margin-bottom: 12px;
}

/* Título do painel de logout em modo escuro - SEMPRE BRANCO */
.dark-mode .logout-panel .logout-title {
    color: white;
}

.logout-panel .logout-message {
    margin-bottom: 20px;
    line-height: 1.5;
    color: #333;
}

/* Mensagem do painel de logout em modo escuro - SEMPRE BRANCA */
.dark-mode .logout-panel .logout-message {
    color: white;
}

.logout-panel .logout-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.logout-panel .logout-btn-confirm {
    background: #ff5722;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: 80px;
}

.logout-panel .logout-btn-confirm:hover {
    background: #e64a19;
    transform: translateY(-1px);
}

.logout-panel .logout-btn-cancel {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: 80px;
}

.logout-panel .logout-btn-cancel:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

/* Botões em modo escuro */
.dark-mode .logout-panel .logout-btn-cancel {
    background: #444;
    color: white;
    border-color: #666;
}

.dark-mode .logout-panel .logout-btn-cancel:hover {
    background: #555;
}

/* Variações de tipo */
.notification-panel.success {
    border: 2px solid #4CAF50;
}

.notification-panel.error {
    border: 2px solid #f44336;
}

.notification-panel.warning {
    border: 2px solid #ff9800;
}

.notification-panel.info {
    border: 2px solid #2196F3;
}

.notification-panel.confirm {
    border: 2px solid #9c27b0;
}

/* Ícones dos painéis */
.notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    animation: bounceIn 0.6s ease-out 0.2s both;
}

.notification-panel.success .notification-icon {
    background: #4CAF50;
}

.notification-panel.error .notification-icon {
    background: #f44336;
}

.notification-panel.warning .notification-icon {
    background: #ff9800;
}

.notification-panel.info .notification-icon {
    background: #2196F3;
}

.notification-panel.confirm .notification-icon {
    background: #9c27b0;
}

/* Título dos painéis */
.notification-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 12px;
}

.notification-panel.success .notification-title {
    color: #4CAF50;
}

.notification-panel.error .notification-title {
    color: #f44336;
}

.notification-panel.warning .notification-title {
    color: #ff9800;
}

.notification-panel.info .notification-title {
    color: #2196F3;
}

.notification-panel.confirm .notification-title {
    color: #9c27b0;
}

/* Mensagem dos painéis */
.notification-message {
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Botões dos painéis */
.notification-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.notification-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: 80px;
}

.notification-btn.primary {
    background: #4CAF50;
    color: white;
}

.notification-btn.primary:hover {
    background: #45a049;
    transform: translateY(-1px);
}

.notification-btn.secondary {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.notification-btn.secondary:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

.notification-btn.danger {
    background: #f44336;
    color: white;
}

.notification-btn.danger:hover {
    background: #da190b;
    transform: translateY(-1px);
}

/* Botões em modo escuro */
.dark-mode .notification-btn.secondary {
    background: #444;
    color: white;
    border-color: #666;
}

.dark-mode .notification-btn.secondary:hover {
    background: #555;
}

/* Formulário de senha com validação visual */
.password-input-group {
    margin: 16px 0;
    text-align: left;
}

.password-input-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

.password-input-group input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.password-input-group input:focus {
    outline: none;
    border-color: #4CAF50;
}

.password-input-group input.error {
    border-color: #f44336;
}

.dark-mode .password-input-group input {
    background: #444;
    color: white;
    border-color: #666;
}

.dark-mode .password-input-group input:focus {
    border-color: #4CAF50;
}
/* ----- Fim Painéis Usuario.html ----- */

/* 🚫 PÁGINA 404 - ERRO NÃO ENCONTRADO */
.error-404-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px #0001;
    padding: 40px 32px 32px 32px;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    transition: background 0.4s, color 0.3s;
}

.error-404-title {
    font-size: 3.2em;
    font-weight: bold;
    color: #c00;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.error-404-message {
    font-size: 1.3em;
    margin-bottom: 24px;
    color: #444;
}

.error-404-actions a {
    display: inline-block;
    background: #c00;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 36px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    margin: 0 8px;
    transition: background 0.2s;
    box-shadow: 0 2px 12px #0001;
}

.error-404-actions a:hover {
    background: #ff8d30;
    color: #fff;
}

/* Dark mode para página 404 */
body.dark-mode .error-404-container {
    background: #2a2a2a;
    color: #f0f0f0;
}

body.dark-mode .error-404-title {
    color: #ff6b6b;
}

body.dark-mode .error-404-message {
    color: #f0f0f0;
}

/* Responsivo para página 404 */
@media (max-width: 600px) {
    .error-404-container {
        padding: 18px 4vw;
    }
    
    .error-404-title {
        font-size: 2em;
    }
    
    .error-404-message {
        font-size: 1em;
    }
    
    .error-404-actions a {
        padding: 10px 2vw;
        font-size: 1em;
    }
}
/* ----- Fim Página 404 ----- */

/* 🗑️ PAINEL DE CONFIRMAÇÃO DE REMOÇÃO DE PRODUTO */
.remove-product-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-out;
}

.remove-product-panel {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    animation: slideInUp 0.4s ease-out;
    border: 2px solid #f44336;
}

/* Adaptação para modo escuro */
.dark-mode .remove-product-panel {
    background: #2a2a2a;
    color: white;
    border-color: #f44336;
}

.remove-product-panel .remove-icon {
    width: 48px;
    height: 48px;
    background: #f44336;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    animation: bounceIn 0.6s ease-out 0.2s both;
}

.remove-product-panel .remove-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #f44336;
    margin-bottom: 8px;
}

/* Título do painel de remoção em modo escuro - SEMPRE BRANCO */
.dark-mode .remove-product-panel .remove-title {
    color: white;
}

.remove-product-panel .remove-product-name {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid #f44336;
}

/* Nome do produto em modo escuro - SEMPRE BRANCO */
.dark-mode .remove-product-panel .remove-product-name {
    color: white;
    background: rgba(244, 67, 54, 0.1);
}

.remove-product-panel .remove-message {
    margin-bottom: 20px;
    line-height: 1.5;
    color: #333;
}

/* Mensagem do painel de remoção em modo escuro - SEMPRE BRANCA */
.dark-mode .remove-product-panel .remove-message {
    color: white;
}

.remove-product-panel .remove-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.remove-product-panel .remove-btn-confirm {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: 80px;
}

.remove-product-panel .remove-btn-confirm:hover {
    background: #d32f2f;
    transform: translateY(-1px);
}

.remove-product-panel .remove-btn-cancel {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: 80px;
}

.remove-product-panel .remove-btn-cancel:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

/* Botões em modo escuro */
.dark-mode .remove-product-panel .remove-btn-cancel {
    background: #444;
    color: white;
    border-color: #666;
}

.dark-mode .remove-product-panel .remove-btn-cancel:hover {
    background: #555;
}

/* 🔧 ESTILOS INLINE MIGRADOS PARA CSS CENTRALIZADO */

/* Painel de login necessário - produtos.html */
.login-required-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 16px;
    color: #ff6b35;
}

.login-required-message {
    margin-bottom: 20px;
    line-height: 1.5;
}

.login-required-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.login-required-buttons .login-btn {
    background: #ff6b35;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.login-required-buttons .cancel-btn {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

/* Input de nome da pasta - produtos.html */
.folder-name-input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 1.1em;
    font-weight: bold;
    overflow-x: auto;
    white-space: nowrap;
    text-overflow: unset;
}

/* Ícone de lixeira - produtos.html */
.trash-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Título do produto em pasta - produtos.html */
.product-folder-title {
    font-weight: bold;
}

/* URL do produto em pasta - produtos.html */
.product-folder-url {
    font-size: 0.97em;
    word-break: break-all;
}

/* Aviso de ação irreversível - produtos.html */
.irreversible-action-warning {
    color: #e53935;
    font-size: 0.98em;
}

/* Display none helper */
.hidden {
    display: none;
}

/* Dark mode para estilos migrados */
body.dark-mode .login-required-title {
    color: #ff8a65;
}

body.dark-mode .login-required-message {
    color: #f0f0f0;
}

body.dark-mode .login-required-buttons .cancel-btn {
    background: #444;
    color: white;
    border-color: #666;
}

/* Estilos para pasta.html */
.maximize-storage-btn {
    background: linear-gradient(45deg, #4CAF50, #45a049);
    margin-left: 10px;
}

.modal-post-fields-hidden {
    display: none;
}

/* Estilos para usuario.html */
.edit-username-field-hidden {
    display: none;
}

/* Estilos para post.html */
.gist-id-example {
    color: #c00;
}

.post-container-hidden {
    display: none;
}

.editor-toolbar-relative {
    position: relative;
}

.color-label,
.highlight-label {
    display: inline-block;
    vertical-align: middle;
}

.color-label-text,
.highlight-label-text {
    font-size: 0.95em;
    color: #c00;
}

.edit-btn-hidden {
    display: none;
}

.floating-btn-hidden {
    display: none;
}

/* Estilos para debug.html */
.debug-output {
    white-space: pre-wrap;
    font-family: monospace;
    margin-top: 20px;
}

/* === ADMIN SUGESTÕES === */

/* === ADMIN PAINEL DE CONTROLE === */
.admin-nav-btn {
  background: var(--primary-color);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
}

.admin-nav-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.admin-dashboard {
  margin-bottom: 30px;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.dashboard-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dashboard-card h3 {
  color: var(--primary-color);
  margin: 0 0 20px 0;
  font-size: 1.3rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: var(--input-bg);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 600;
}

.stat-value {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-color);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quick-action-btn {
  background: var(--card-bg);
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 15px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-align: center;
}

.quick-action-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}

.control-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.panel-header h2 {
  color: var(--text-color);
  margin: 0;
  font-size: 1.5rem;
}

.panel-controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.panel-controls select,
.panel-controls input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-color);
  font-size: 14px;
}

.refresh-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: #2980b9;
}

.logs-container {
  display: grid;
  gap: 20px;
}

.log-entry {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.log-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.log-entry.create {
  border-left: 4px solid #27ae60;
}

.log-entry.update {
  border-left: 4px solid #f39c12;
}

.log-entry.delete {
  border-left: 4px solid #e74c3c;
}

.log-entry.restore {
  border-left: 4px solid #3498db;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.log-info {
  display: flex;
  gap: 15px;
  align-items: center;
}

.log-action {
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.log-action.create {
  background: #27ae60;
}

.log-action.update {
  background: #f39c12;
}

.log-action.delete {
  background: #e74c3c;
}

.log-action.restore {
  background: #3498db;
}

.log-type {
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  background: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.log-timestamp {
  color: var(--text-muted);
  font-size: 14px;
}

.log-details h4 {
  color: var(--text-color);
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.log-details p {
  color: var(--text-color);
  margin: 8px 0;
  line-height: 1.5;
}

.log-details code {
  background: var(--input-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--primary-color);
  border: 1px solid var(--border-color);
}

.log-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.restore-btn,
.details-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s ease;
}

.restore-btn {
  background: #3498db;
  color: white;
}

.restore-btn:hover {
  background: #2980b9;
}

.details-btn {
  background: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.details-btn:hover {
  background: var(--primary-color);
  color: white;
}

.restore-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.restore-panel .panel-content {
  background: var(--card-bg);
  padding: 30px;
  border-radius: 15px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.backup-preview {
  margin-top: 20px;
  padding: 15px;
  background: var(--input-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.backup-preview h4 {
  margin: 0 0 10px 0;
  color: var(--text-color);
}

.backup-preview pre {
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  max-height: 200px;
}

.no-logs {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  background: var(--card-bg);
  border-radius: 15px;
  border: 2px dashed var(--border-color);
}

.no-logs h3 {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.loading-logs {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.system-stats p {
  margin: 8px 0;
  padding: 8px;
  background: var(--input-bg);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* Responsividade */
@media (max-width: 768px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
  
  .panel-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .panel-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .log-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .log-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .log-actions {
    flex-direction: column;
  }
}

/* 🔒 AVISO DE EMAIL NÃO VERIFICADO */
.email-warning {
  position: relative;
  z-index: 1000;
}

.email-warning div {
  animation: slideIn 0.3s ease-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.email-warning button:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Responsividade para aviso de email */
@media (max-width: 768px) {
  .email-warning div {
    max-width: 250px !important;
    font-size: 12px !important;
  }
  
  .email-warning button {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

.admin-loading {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-color);
}

.no-access {
  text-align: center;
  padding: 50px 20px;
}

.no-access h2 {
  color: #e74c3c;
  margin-bottom: 20px;
}

.no-access p {
  color: var(--text-color);
  margin-bottom: 30px;
}

/* Header específico para admin */
.header .nav-left h1 {
  color: var(--text-color);
  font-size: 1.5rem;
  margin: 0;
  margin-left: 15px;
}

.header .nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header .logout-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.header .logout-btn:hover {
  background: #c0392b;
}

/* Admin title no header */
.admin-title {
  flex: 1;
  text-align: center;
}

.admin-title h1 {
  color: var(--primary-color);
  font-size: 1.4rem;
  margin: 0;
  font-weight: 600;
}

/* Ajustar header-links para admin */
header .header-links {
  display: flex;
  align-items: center;
  gap: 15px;
}

header .header-links .logout-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

header .header-links .logout-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
}

.suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 2px solid var(--border-color);
}

/* Layout específico para admin */
.admin-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.admin-welcome {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: var(--card-bg);
  border-radius: 15px;
  border: 1px solid var(--border-color);
}

.admin-welcome h2 {
  color: var(--primary-color);
  margin-bottom: 10px;
  font-size: 2rem;
}

.admin-welcome p {
  color: var(--text-muted);
  font-size: 1.1rem;
}

.loading-content {
  text-align: center;
  padding: 50px 20px;
}

.loading-content h2 {
  color: var(--primary-color);
  margin-bottom: 15px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no-access-content {
  text-align: center;
  padding: 50px 20px;
  background: var(--card-bg);
  border-radius: 15px;
  border: 1px solid var(--border-color);
}

.no-access-content h2 {
  color: #e74c3c;
  margin-bottom: 20px;
  font-size: 2rem;
}

.no-access-content p {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.suggestions-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.suggestions-title h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 1.4rem;
}

.suggestions-count {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: normal;
}

.suggestions-header h2 {
  color: var(--text-color);
  margin: 0;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.filter-btn span {
  font-size: 16px;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.suggestions-container {
  display: grid;
  gap: 20px;
}

.suggestion-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.suggestion-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.suggestion-card.pendente {
  border-left: 4px solid #f39c12;
}

.suggestion-card.aprovada {
  border-left: 4px solid #27ae60;
}

.suggestion-card.rejeitada {
  border-left: 4px solid #e74c3c;
}

.suggestion-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  gap: 15px;
}

.suggestion-header h3 {
  margin: 0;
  color: var(--text-color);
  flex: 1;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge.pendente {
  background: #f39c12;
  color: white;
}

.status-badge.aprovada {
  background: #27ae60;
  color: white;
}

.status-badge.rejeitada {
  background: #e74c3c;
  color: white;
}

.suggestion-description {
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 15px;
  word-wrap: break-word;
}

.suggestion-description strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.suggestion-description p {
  margin: 0;
  padding: 10px;
  background: var(--input-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-style: italic;
}

.suggestion-date {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.suggestion-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.suggestion-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-approve {
  background: #27ae60;
  color: white;
}

.btn-approve:hover {
  background: #219a52;
}

.btn-reject {
  background: #e74c3c;
  color: white;
}

.btn-reject:hover {
  background: #c0392b;
}

.btn-reset {
  background: #f39c12;
  color: white;
}

.btn-reset:hover {
  background: #e67e22;
}

.btn-delete {
  background: #95a5a6;
  color: white;
}

.btn-delete:hover {
  background: #7f8c8d;
}

.no-suggestions {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  background: var(--card-bg);
  border-radius: 15px;
  border: 2px dashed var(--border-color);
}

.no-suggestions h3 {
  color: var(--text-color);
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.no-suggestions p {
  font-size: 1.1rem;
  margin: 0;
}

@media (max-width: 768px) {
  .admin-main {
    padding: 15px;
  }
  
  .admin-welcome {
    padding: 20px;
  }
  
  .admin-welcome h2 {
    font-size: 1.5rem;
  }
  
  .suggestions-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .suggestions-title {
    text-align: center;
  }
  
  .filter-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .filter-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  
  .suggestion-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .status-badge {
    align-self: flex-start;
  }
  
  .suggestion-actions {
    justify-content: center;
    gap: 8px;
  }
  
  .suggestion-actions button {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .header .nav-left h1 {
    font-size: 1.2rem;
  }
  
  .no-access-content h2 {
    font-size: 1.5rem;
  }
}

/* ===== PAINEL DE SEGURANÇA E BACKUP ===== */
.security-panel {
  margin-bottom: 30px;
  background: linear-gradient(135deg, #ff6b6b, #ffa726);
  border: 2px solid #e74c3c;
  border-radius: 12px;
}

.security-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.security-group {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.security-group h3 {
  margin: 0 0 15px 0;
  color: white;
  font-size: 1.1em;
}

.emergency-btn, .backup-btn, .restore-btn, .monitor-btn {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95em;
}

.emergency-btn {
  background: #e74c3c;
  color: white;
}

.emergency-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
}

.backup-btn {
  background: #3498db;
  color: white;
}

.backup-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.restore-btn {
  background: #f39c12;
  color: white;
}

.restore-btn:hover {
  background: #e67e22;
  transform: translateY(-2px);
}

.monitor-btn {
  background: #27ae60;
  color: white;
}

.monitor-btn:hover {
  background: #229954;
  transform: translateY(-2px);
}

/* ===== MODAIS ===== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalAppear 0.3s ease;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 20px;
  border-radius: 15px 15px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.3em;
}

.close {
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  transition: color 0.3s ease;
}

.close:hover {
  color: #f1c40f;
}

.modal-body {
  padding: 30px;
}

/* ===== LISTA DE BACKUPS ===== */
.backups-grid {
  display: grid;
  gap: 20px;
}

.backup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.backup-item:hover {
  border-color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
}

.backup-info h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.backup-info p {
  margin: 5px 0;
  color: #7f8c8d;
  font-size: 0.9em;
}

.backup-actions {
  display: flex;
  gap: 10px;
}

.restore-backup-btn, .delete-backup-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.restore-backup-btn {
  background: #27ae60;
  color: white;
}

.restore-backup-btn:hover {
  background: #229954;
}

.delete-backup-btn {
  background: #e74c3c;
  color: white;
}

.delete-backup-btn:hover {
  background: #c0392b;
}

/* ===== OPÇÕES DE RESTAURAÇÃO ===== */
.restore-options {
  margin-bottom: 30px;
}

.restore-type-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.restore-type-btn {
  padding: 20px;
  border: 2px solid #3498db;
  border-radius: 10px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.restore-type-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}

.restore-content {
  min-height: 200px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

/* ===== OPÇÕES DE DESFAZER ===== */
.undo-options {
  display: grid;
  gap: 15px;
}

.undo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.undo-item:hover {
  border-color: #f39c12;
  box-shadow: 0 3px 10px rgba(243, 156, 18, 0.2);
}

.undo-info {
  flex: 1;
}

.undo-info strong {
  color: #2c3e50;
  display: block;
  margin-bottom: 5px;
}

.undo-info p {
  margin: 5px 0;
  color: #7f8c8d;
}

.undo-info small {
  color: #95a5a6;
}

.undo-btn {
  padding: 10px 20px;
  background: #f39c12;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.undo-btn:hover {
  background: #e67e22;
}

/* ===== EMERGÊNCIA ===== */
.emergency-options {
  display: grid;
  gap: 15px;
  margin: 20px 0;
}

.emergency-option {
  padding: 20px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
  transition: all 0.3s ease;
}

.emergency-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
}

.emergency-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

/* ===== RELATÓRIO DE SEGURANÇA ===== */
.security-report {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
}

.report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.stat-item {
  padding: 15px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #3498db;
  transition: all 0.3s ease;
}

.stat-item.alert {
  border-left-color: #e74c3c;
  background: #fff5f5;
}

.stat-item.safe {
  border-left-color: #27ae60;
  background: #f0fff4;
}

.security-recommendations {
  margin-top: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.security-recommendations h5 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}

.security-recommendations p {
  margin: 8px 0;
  color: #7f8c8d;
}

.security-recommendations p.alert {
  color: #e74c3c;
  font-weight: bold;
}

.security-recommendations p.safe {
  color: #27ae60;
  font-weight: bold;
}

/* ===== RESPONSIVIDADE PARA MODAIS ===== */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .backup-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .backup-actions {
    width: 100%;
    justify-content: center;
  }
  
  .restore-type-buttons {
    grid-template-columns: 1fr;
  }
  
  .security-controls {
    grid-template-columns: 1fr;
  }
  
  .report-stats {
    grid-template-columns: 1fr;
  }
}

/* ===== MODO ESCURO PARA NOVOS COMPONENTES ===== */
.dark-mode .security-group {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .modal-content {
  background: #2c3e50;
  color: white;
}

.dark-mode .backup-item {
  background: #34495e;
  border-color: #4a5f7a;
}

.dark-mode .backup-item:hover {
  border-color: #3498db;
}

.dark-mode .backup-info h4 {
  color: white;
}

.dark-mode .backup-info p {
  color: #bdc3c7;
}

.dark-mode .restore-content {
  background: #34495e;
  border-color: #4a5f7a;
  color: white;
}

.dark-mode .undo-item {
  background: #34495e;
  border-color: #4a5f7a;
}

.dark-mode .undo-info strong {
  color: white;
}

.dark-mode .undo-info p {
  color: #bdc3c7;
}

.dark-mode .security-report {
  background: #34495e;
  color: white;
}

.dark-mode .stat-item {
  background: #2c3e50;
  color: white;
}

.dark-mode .security-recommendations {
  background: #2c3e50;
  border-color: #4a5f7a;
}

.dark-mode .security-recommendations h5 {
  color: white;
}

.dark-mode .emergency-warning {
  background: #8b6914;
  border-color: #b8860b;
  color: #fff3cd;
}

/* Welcome Text - Estilo Divertido */
.welcome-text {
  text-align: center;
  margin: 25px auto;
  padding: 20px;
  max-width: 800px;
}

.welcome-text p {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  margin: 0;
  line-height: 1.6;
}

/* Notice Text - Aviso Menor */
.notice-text {
  text-align: center;
  margin: 15px auto 20px auto;
  padding: 12px 20px;
  max-width: 700px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
}

.notice-text p {
  font-family: Arial, sans-serif;
  font-size: 0.95em;
  margin: 0;
  color: #856404;
  line-height: 1.4;
}

/* Dark mode para notice-text */
body.dark-mode .notice-text {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.4);
}

body.dark-mode .notice-text p {
  color: #ffc107;
}

/* Botão de Trocar Gist */
.change-gist-btn {
  background: #ff6b35;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 10px;
  transition: all 0.3s ease;
  display: none;
}

.change-gist-btn:hover {
  background: #e55a2b;
  transform: translateY(-1px);
}

.change-gist-btn:active {
  transform: translateY(0);
}

/* Overlay para Trocar Gist */
.change-gist-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.change-gist-panel {
  background: var(--post-bg);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  text-align: center;
}

.change-gist-panel h3 {
  margin-top: 0;
  color: var(--text-color);
  font-size: 1.5em;
  margin-bottom: 20px;
}

.change-gist-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 20px;
  background: var(--bg-color);
  color: var(--text-color);
  box-sizing: border-box;
}

.change-gist-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.change-gist-confirm-btn, .change-gist-cancel-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.change-gist-confirm-btn {
  background: #27ae60;
  color: white;
}

.change-gist-confirm-btn:hover {
  background: #229954;
}

.change-gist-cancel-btn {
  background: #e74c3c;
  color: white;
}

.change-gist-cancel-btn:hover {
  background: #c0392b;
}

/* Container do título da pasta com botão de voltar */
.folder-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 20px auto;
  max-width: 850px;
}

/* Botão de voltar */
.back-button {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Título Principal da Pasta */
.main-folder-title {
  text-align: center;
  margin: 0; /* Remover margin pois agora está no container */
  padding: 15px;
  font-size: 2.5em;
  font-weight: bold;
  color: var(--text-color);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 800px;
  word-wrap: break-word;
}

/* Modo escuro para o título e botão de voltar */
body.dark-mode .main-folder-title {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .back-button {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .back-button:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Responsivo para o título */
@media (max-width: 768px) {
  .folder-title-container {
    gap: 15px;
    margin: 15px auto;
  }
  
  .back-button {
    width: 45px;
    height: 45px;
    font-size: 1.3em;
  }
  
  .main-folder-title {
    font-size: 2em;
    margin: 0; /* Manter 0 pois está no container */
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .folder-title-container {
    gap: 12px;
    margin: 10px auto;
    flex-direction: row; /* Manter lado a lado mesmo em mobile */
  }
  
  .back-button {
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    flex-shrink: 0; /* Não encolher */
  }
  
  .main-folder-title {
    font-size: 1.5em;
    margin: 10px auto;
    padding: 10px;
  }
}

/* Botão flutuante de voltar (vermelho) */
.floating-btn-back {
  position: fixed;
  top: 120px;
  left: 20px;
  z-index: 1002;
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
}

.floating-btn-back:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(231, 76, 60, 0.4);
  opacity: 1;
}

.floating-btn-back:active {
  background: #a93226;
  transform: translateY(0);
}

/* Dark mode para o botão de voltar */
body.dark-mode .floating-btn-back {
  background: #d63031;
  box-shadow: 0 4px 20px rgba(214, 48, 49, 0.3);
}

body.dark-mode .floating-btn-back:hover {
  background: #b71c1c;
  box-shadow: 0 6px 25px rgba(214, 48, 49, 0.4);
}

/* Responsivo para o botão de voltar */
@media (max-width: 768px) {
  .floating-btn-back {
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .floating-btn-back {
    padding: 8px 12px;
    font-size: 12px;
  }
}