* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'NaruSans-Regular', sans-serif;
}

/* ===== OTIMIZAÇÕES DE PERFORMANCE ===== */
html {
  scroll-behavior: auto; /* Desativa smooth scroll para melhor performance */
}

body {
  background: #d5e3da;
  display: flex;
  justify-content: center;
  padding: 20px;
  /* Otimização de renderização */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* ========== OTIMIZAÇÕES DE SCROLL - ANTI-PAINTING ========== */
body.is-scrolling .tag {
  pointer-events: none;
}

body.is-scrolling .tag * {
  transition: none !important;
  animation: none !important;
}

body.is-scrolling .tag img,
body.is-scrolling button {
  box-shadow: none !important;
}

.container {
  background: #fff;
  border-radius: 18px;
  padding: 0;
  width: 100%;
  max-width: 1300px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Header (logo + search + login) */
.app-header {
  display: grid;
  grid-template-columns: 240px 1fr 200px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #e6efe9;
  background: linear-gradient(180deg, #f7fbf8 0%, #ffffff 100%);
}
.app-logo { width: 100%; object-fit: contain; }
.header-left { display:flex; align-items:center; }
.header-center { display:flex; justify-content:center; }
.header-right { display:flex; justify-content:flex-end; }
.search-input {
  width: 100%;
  max-width: 720px;
  padding: 10px 14px;
  border: 1px solid #b9d1c2;
  border-radius: 14px;
  outline: none;
  background: #fff;
}
.store-info { display:flex; align-items:center; gap:12px; color:#2d4739; font-weight:600; }
.logout-top { border:1px solid #cfd8d3; background:#f7faf8; padding:6px 10px; border-radius:10px; cursor:pointer; }
.logout-top:hover { background:#eef4f0; }

/* Main layout: sidebar + content */
.layout { display:grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 160px); }
.sidebar {
  background: #f6faf8;
  border-right: 1px solid #e6efe9;
  padding: 16px 12px;
}
.side-nav { display:flex; flex-direction:column; gap:10px; }
.side-nav .filter { display:flex; align-items:center; gap:10px; justify-content:flex-start; background:#eef4f0; border:none; padding:10px 12px; border-radius:12px; color:#2d4739; cursor:pointer; }
.side-nav .filter:hover { filter:brightness(0.98); }
.side-nav .filter.active { background:#27ae60; color:#fff; }
.side-nav .filter i { width:20px; text-align:center; color:#6b8c74; }
.side-nav .filter.active i { color:#fff; }
.side-divider { height:1px; background:#e6efe9; margin:12px 0; }

.content { padding: 16px; display:flex; flex-direction:column; gap: 12px; }

/* Contadores: horizontal e centralizados */
.counts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.counts p { display:flex; align-items:center; gap:6px; color:#2d4739; }

/* Top header with search + filters + counts */
/* legacy topbar removed in favor of app-header */
.topbar .searchbox {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar .searchbox h2 {
  color: #6b8c74;
  font-size: 18px;
}
.topbar .searchbox input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #6b8c74;
  border-radius: 8px;
  outline: none;
}
.topbar .filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.topbar .counts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

header h1 {
  color: #6b8c74;
  font-size: 24px;
}

header input {
  padding: 8px 12px;
  border: 1px solid #6b8c74;
  border-radius: 20px;
  outline: none;
}

.border {
  width: 1px;
  background: #ccc;
  height: 24px;
  margin: 0 10px;
  align-self: center;
  margin-left: 10px;
  margin-right: 16px;
}

.filters { display:flex; }

.filters button {
  padding: 10px 16px;
  margin-right: 8px;
  border: none;
  border-radius: 15px;
  background: #eee;
  cursor: pointer;
  height: 40px;
  line-height: 20px;
}

.filters button.active {
  background: #6b8c74;
  color: #fff;
}

.tags-grid {
  display: grid;
  /* Evita crescimento dos cards quando há poucas tags */
  grid-template-columns: repeat(auto-fill, 220px);
  gap: 15px;
  justify-content: start;
  /* Otimizações de performance */
  contain: layout style;
}
.tags-grid > .tag { 
  width: 220px;
  /* CRÍTICO: content-visibility: auto pula renderização de elementos fora da viewport */
  content-visibility: auto;
  contain-intrinsic-size: 220px 320px;
  /* Otimização: isola repaint de cada tag */
  contain: layout paint;
  /* Backface para composição */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tag {
  border: 3px solid;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative; /* Necessário para posicionamento da bolinha */
}

/* Bolinha de comentário amarela (apenas visualização na loja) */
.tag .comment-bubble {
  position: absolute;
  top: 15px;
  right: 102px;
  width: 15px;
  height: 15px;
  background-color: #f39c12;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  animation: comment-blink 1.5s ease-in-out infinite;
  box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}

/* Animação de piscar suave */
@keyframes comment-blink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Popup do comentário ao clicar (loja) */
.tag .comment-text {
  display: none;
}

.comment-popup-loja {
  display: none;
  position: absolute;
  top: 42px;
  right: 12px;
  background: #ffffff;
  border: 2px solid #f39c12;
  padding: 12px;
  border-radius: 10px;
  max-width: 220px;
  font-size: 13px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: #2d4739;
  text-align: left;
  line-height: 1.5;
  word-wrap: break-word;
}

.comment-popup-loja.show {
  display: block;
}

.comment-popup-loja::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #f39c12;
}

.comment-popup-loja::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 9px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffffff;
}

/* Ajusta posição da bolinha quando há ribbon (tarja azul) */
.tag .ribbon-future ~ .comment-bubble {
  top: 30px;
}

.tag .ribbon-future ~ .comment-popup-loja {
  top: 60px;
}

/* Cabeçalho da tag: seleção + botões */
.tag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  position: relative;
  z-index: 5;
}

/* Quando há tarja azul (ribbon-future), empurra os botões para baixo */
.ribbon-future ~ .tag-head {
  margin-top: 18px;
}

/* Empurra botões quando há badge-removed no topo */
.tag:has(.badge-removed) .tag-head {
  margin-top: 22px;
}

.select-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #444;
}
.tag-actions { display: inline-flex; gap: 6px; position: relative; z-index: 5; }
.action-btn {
  border: 1px solid #cfd8d3;
  background: #f7faf8;
  color: #2d4739;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  position: relative;
  z-index: 5;
}
.action-btn:hover { background: #eef4f0; }

.tag img {
  width: 100%;
  border-radius: 6px;
  /* Otimização de performance - MELHORADO */
  contain: layout paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Decode assíncrono */
  decoding: async;
  image-rendering: auto;
  /* Limita altura máxima para evitar imagens enormes */
  max-height: 280px;
  min-height: 200px;
  object-fit: cover;
  background: #f0f0f0;
  display: block;
}

.tag small {
  font-size: 12px;
  color: #555;
}

.tag .actions {
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}

.tag .actions button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Sidebar removido na nova estrutura */

.sidebar p {
  margin: 8px 0;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}

.green { background: #27ae60; }
.orange { background: #f39c12; }
.red { background: #e74c3c; }
.black { background: #1b1b1b; }

.form-section {
  background: #f1f8f4;
  padding: 15px;
  border-radius: 12px;
  grid-column: span 2;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

form input, form textarea, form button {
  padding: 10px;
  border: 1px solid #6b8c74;
  border-radius: 8px;
}

form textarea {
  resize: none;
  height: 60px;
}

form button {
  background: #6b8c74;
  color: white;
  border: none;
  cursor: pointer;
}

form button:hover {
  background: #56735d;
}


    .modal { 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; }
    .modal-content { background:#fff; padding:20px; border-radius:10px; width:350px; max-height:80%; overflow-y:auto;}
    .tag-checkbox { display:flex; align-items:center; margin-bottom:5px; }
    .tag-checkbox img { width:40px; height:40px; margin-right:10px; }

    .modal-content h2 {
      margin-bottom: 20px;
      color: #cf0e0e;
      font-size: 18px;
    }

    /* Session badge (user + logout) — estilo unificado "SIGLA – Sair" */
    .session-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #fff;
      font-family: 'NaruSans-Regular', sans-serif;
      font-size: 14px;
    }
    .session-badge .id { font-family: 'NaruSans-Bold', sans-serif; font-weight: 700; }
    .session-badge .sep { opacity: .6; }
    .session-badge .logout-btn {
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      font-family: 'NaruSans-Bold', sans-serif;
      font-size: 14px;
      padding: 0;
      opacity: 0.85;
    }
    .session-badge .logout-btn:hover {
      opacity: 1;
      text-decoration: underline;
    }

/* Bulk actions bar */
.bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eff6f1;
  border: 1px solid #c8e0d1;
  color: #2f5d45;
  padding: 8px 12px;
  border-radius: 10px;
  flex-wrap: wrap; /* allow wrapping to avoid overflow */
  gap: 8px;
}
.bulk-actions .bulk-left { display:flex; align-items:center; gap:8px; }
.bulk-actions .bulk-left .sep { opacity:.5; }
.bulk-actions .bulk-right { display:flex; align-items:center; gap:8px; }
.bulk-btn {
  border: 1px solid #7fb08f;
  background: #e6f2eb;
  color: #2f5d45;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.bulk-btn.primary { background: #6b8c74; color:#fff; border-color:#6b8c74; }
.bulk-btn.secondary { background: #0c6749; color:#fff; border-color:#0c6749; }

  #bulkDownload:hover {
    background-color: #0b5e42;
  }

/* Mobile: stack bulk bar items and make buttons full-width */
@media (max-width: 575px) {
  .app-header { grid-template-columns: 1fr; gap:8px; }
  .header-left { justify-content:center; }
  .header-right { justify-content:center; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid #e6efe9; }
  .bulk-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bulk-actions .bulk-left,
  .bulk-actions .bulk-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .bulk-actions .bulk-right {
    justify-content: stretch;
  }
  .bulk-actions .bulk-right .bulk-btn {
    flex: 1 1 100%;
  }
  .bulk-btn { white-space: normal; }

  .app-logo {margin: 10px 8px 25px 8px;}
}








    /* === NOVO LAYOUT (referência novo-layout-adm) === */
    :root {
      --green: #0c6749;
      --green-dark: #095138;
      --bg: #121b1c;
      --panel: #e6f0ec;
      --radius: 14px;
      --font: "NaruSans-Regular", system-ui, Arial, sans-serif;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: var(--font);
    }

    * {
      box-sizing: border-box;
    }

    @font-face {
      font-family: 'NaruSans-Bold';
      src: url(/font/NaruSans-Bold.ttf) format('truetype');
      font-weight: bold;
    }

    @font-face {
      font-family: 'NaruSans-Regular';
      src: url(/font/NaruSans-Regular.ttf) format('truetype');
      font-weight: normal;
    }

    /* Topbar unificada — mesma de adm.css */
    .topbar {
      height: 64px;
      width: 100%;
      background: #108e64;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 24px;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100001;
    }

    .topbar .logo { justify-self: start; display: flex; align-items: center; }

    .topbar .logo img {
      width: 190px;
      height: auto;
      display: block;
    }

    .topbar .user-info {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .topbar .user-info button {
      background: transparent;
      border: none;
      color: #fff;
      font-family: 'NaruSans-Bold', sans-serif;
      font-size: 18px;
      cursor: pointer;
      padding: 12px 28px;
      border-radius: 0 10px 10px 10px;
      transition: background .15s;
    }

    .topbar .user-info button:hover {
      background: rgba(255,255,255,0.1);
    }

    .topbar .user-info button.active {
      background: #0c6749;
    }

    .topbar .topbar-right {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Badge sessão — unificado "SIGLA – Sair" */
    .topbar .session-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #fff;
      font-family: 'NaruSans-Regular', sans-serif;
      font-size: 14px;
      position: static;
      background: none;
      border: none;
      padding: 0;
      backdrop-filter: none;
    }

    .topbar .session-badge .id {
      font-family: 'NaruSans-Bold', sans-serif;
      font-weight: 700;
    }

    .topbar .session-badge .sep {
      opacity: .6;
    }

    /* Global loading overlay */
    #loadingOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    #loadingOverlay .progress-card {
      background: #ffffff;
      padding: 16px 18px;
      border-radius: 12px;
      width: min(560px, 92vw);
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
      color: #2c3e50;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #loadingOverlay .progress-title {
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #loadingOverlay .progress-bar {
      width: 100%;
      height: 10px;
      border-radius: 10px;
      background: #ecf0f1;
      overflow: hidden;
      border: 1px solid #dde4e6;
    }
    #loadingOverlay .progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #0c6749, #20ad7e);
      transition: width .15s ease;
    }
    #loadingOverlay .progress-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #455a64;
    }

    .session-badge .logout-btn {
      background: #fff;
      border: none;
      padding: 6px 14px;
      border-radius: 24px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      color: #0c6749;
    }

    .session-badge .logout-btn:hover {
      filter: brightness(.93);
    }

    /* Barra secundária (agora filtros/status/search) */
    /* Filtros dentro da mesma área das tags */
    .second-header {
      display: none;
    }

    .filter-surface {
      background: #e6f0ec;
      border-radius: 18px;
      padding: 18px 28px 16px;
      box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .18);
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 26px;
    }

    .filter-surface.compact {
      position: sticky;
      top: 80px;
    }

    /* (Removido FAB de filtros neste layout) */
    .filters-row {
      display: flex;
      gap: 14px;
      align-items: center;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .filters-row>* {
      white-space: nowrap;
    }

    .status-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .status-filters button {
      background: #ffffff;
      border: 1px solid #c3d3cb;
      color: #0c6749;
      padding: 10px 18px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
    }

    .status-filters button.active {
      background: #0c6749;
      color: #fff;
      border-color: #0c6749;
    }

    .status-filters button:not(.active):hover {
      background: #f2f8f5;
    }

    .counts {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }

    .dot.green {
      background: #27ae60;
    }

    .dot.orange {
      background: #f39c12;
    }

    .dot.red {
      background: #e74c3c;
    }

    /* Campo busca global */
    .global-search {
      flex: 1;
      position: relative;
    }

    .global-search input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #c3d3cb;
      border-radius: 10px;
      background: #fff;
      font-size: 13px;
      font-family: var(--font);
    }

    .global-search input:focus {
      outline: 2px solid #0c6749;
    }

    /* Bulk actions bar (reposicionada) */
    #bulkActions {
      background: #ffffff;
      border: 1px solid #d2e2db;
      padding: 10px 16px;
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
    }

    #bulkActions .bulk-left {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
    }

    #bulkActions .bulk-right {
      display: flex;
      gap: 10px;
    }

    .bulk-btn {
      background: #fff;
      border: 1px solid #c3d3cb;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .bulk-btn.primary {
      background: #0c6749;
      color: #fff;
      border-color: #0c6749;
    }

    .bulk-btn.primary:hover {
      filter: brightness(.93);
    }

    .bulk-btn:not(.primary):hover {
      background: #f2f8f5;
    }

    /* Layout base: sidebar + conteúdo */
    /* App shell full height */
    .app-shell {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      width: 100%;
      overflow: hidden;
      padding-top: 64px; /* compensar topbar fixa */
    }

    .main-area {
      flex: 1;
      display: flex;
      min-height: 0;
      /* para scroll interno */
    }

    nav.side-bar {
      width: 250px;
      background: #0a3526;
      color: #fff;
      padding: 4px 0 28px;
      display: flex;
      flex-direction: column;
    }

    .sidebar-header {
      font-family: 'NaruSans-Bold', sans-serif;
      padding: 0 16px 10px;
      font-size: 22px;
    }

    .sidebar-search {
      padding: 0 16px 14px;
    }

    .sidebar-search input {
      width: 100%;
      background: #16403c;
      border: 1px solid #2c5b55;
      color: #fff;
      border-radius: 8px;
      font-size: 12px;
      padding: 10px 12px;
      font-family: var(--font);
    }

    .sidebar-search input::placeholder {
      color: #c6d1cc;
      opacity: .6;
    }

    ul#categories-list {
      list-style: none;
      margin: 0;
      padding: 0 4px 0 0;
      flex: 1;
      overflow-y: auto;
    }

    ul#categories-list::-webkit-scrollbar {
      width: 8px;
    }

    ul#categories-list::-webkit-scrollbar-thumb {
      background: #1d4c47;
      border-radius: 20px;
      border: 2px solid #113330;
    }

    ul#categories-list li {
      padding: 10px 18px;
      cursor: pointer;
      font-size: 13px;
      font-family: var(--font);
      border-radius: 8px;
      transition: background .15s, color .15s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    ul#categories-list li.active,
    ul#categories-list li:hover {
      background: #0c6749;
      color: #fff;
    }

    .category-pill-count {
      font-size: 11px;
      background: #ffffff20;
      padding: 2px 6px;
      border-radius: 12px;
    }

    /* Conteúdo central */
    main.content-wrapper {
      flex: 1;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .content-inner {
      flex: 1;
      overflow: auto; /* único scroll da área central */
      padding: 26px 52px 48px;
    }

    .tags-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
      justify-items: center;
      width: 100%;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    .tags-grid > .tag { width: 100%; max-width: 260px; }

    .tag {
      background: #fff;
      border: 2px solid #0c6749;
      border-radius: 14px;
      padding: 18px 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
    }

    .tag img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .tag-head {
      position: absolute;
      top: 8px;
      left: 8px;
      right: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .select-row {
      background: #fff;
      padding: 4px;
      border: 2px solid #0c6749;
      border-radius: 8px;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .tag-actions {
      display: flex;
      flex-direction: row;
      gap: 6px;
    }

    .tag-actions button {
      background: #ffffff;
      border: 2px solid #0c6749;
      border-radius: 8px;
      width: 38px;
      height: 38px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0c6749;
    }

    .tag-actions button:hover {
      background: #0c6749;
      color: #fff;
    }

    .tag small {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .4px;
    }

    .remove-btn {
      background: #e74c3c;
      color: #fff;
      border: none;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      cursor: pointer;
      font-weight: 600;
    }

    .remove-btn:hover {
      filter: brightness(.92);
    }

    /* Attention indicator reuse */
    .attention-indicator {
      position: relative;
    }

    /* Counts + filtros container adaptável */
    .top-interactions {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* Tag status border colors override when dynamic */
    .tag[ data-status='valid'] {
      --br: #27ae60;
    }

    .tag[ data-status='soon'] {
      --br: #f39c12;
    }

    .tag[ data-status='expired'] {
      --br: #e74c3c;
    }

    /* Quando deletada força preto */
    .tag.deleted {
      border-color: #000 !important;
    }

    /* ================= Notifications & Indicators ================ */
  .notif-area { display:flex; align-items:center; gap:12px; margin-right:16px; position:relative; }
    #notifBell, #proofsBell { background:transparent; border:none; color:#fff; cursor:pointer; font-size:20px; position:relative; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    #notifBell:hover, #proofsBell:hover { background:rgba(255,255,255,.12); }
    #notifBell .badge, #proofsBell .badge { position:absolute; top:1px; right:1px; background:#e74c3c; color:#fff; font-size:10px; font-weight:700; line-height:1; padding:3px 5px; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.35); }
  .notif-dropdown { position:absolute; top:50px; right:0; background:#fff; color:#2c3e50; width:335px; max-height:480px; overflow-y:auto; border-radius:14px; box-shadow:0 12px 28px -6px rgba(0,0,0,.35); padding:14px 16px 18px; z-index:1000; font-size:13px; border:1px solid #e3e9ec; }
  .notif-dropdown.hidden { display:none; }
  .notif-header { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#2c3e50; padding:4px 2px 10px; }
  .notif-item { cursor:pointer; user-select:none; display:flex; align-items:center; gap:10px; padding:10px 12px; position:relative; background:#fff; border:1px solid #dfe6ea; border-radius:12px; margin-top:8px; transition:background .15s, border-color .15s; text-align:left; }
  .notif-item:hover { background:#f8fafb; border-color:#cdd5d9; }
  .notif-item .n-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .notif-item.type-attention .n-icon { background:#fff8e0; color:#d4a406; border:2px solid #f1c40f; }
  .notif-item.type-expired .n-icon { background:#fdecea; color:#c0392b; border:2px solid #e74c3c; }
  .notif-item .n-text { display:flex; flex-direction:column; line-height:1.25; flex:1; }
  .notif-item .n-title { font-size:13px; font-weight:600; color:#2c3e50; }
  .notif-item .n-sub { font-size:11px; color:#6b7b88; margin-top:2px; }
  .notif-empty { font-size:12px; opacity:.65; padding:6px 2px; }
    .dot-expired { background:#e74c3c; width:10px; height:10px; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.35); flex:0 0 auto; }
    .dot-removed { background:#000; width:10px; height:10px; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.35); flex:0 0 auto; }
    .dot-attention { width:10px; height:10px; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.35); border:2px solid #f1c40f; background:transparent; flex:0 0 auto; }
    .notif-section-separator { margin:8px 0 4px; height:1px; background:#ecf0f1; border:none; }
    .cat-dots { display:inline-flex; align-items:center; gap:4px; margin-left:6px; position:relative; top:1px; }
    .cat-dots span { display:inline-block; width:8px; height:8px; border-radius:50%; box-shadow:0 1px 2px rgba(7, 204, 82, 0.4); background-color: rgb(14, 175, 49);}
    .cat-dots .c-exp { background:#e74c3c; }
    .cat-dots .c-rem { background:#000; }
    .cat-dots .c-att { background:transparent; background-color: #f1c40f; width:8px; height:8px; box-shadow:0 1px 2px rgba(0,0,0,.4); }

  /* Mantém o scroll apenas na área .content-inner; a grid não deve rolar por conta própria */
  .tags-grid { max-height: none !important; overflow: visible !important; }

  /* Agrupamento do sino + badge de sessão à direita */
  .topbar-right { margin-left: auto; display:flex; align-items:center; gap:14px; flex: 0 0 auto; }
  .session-badge { position: static; right:auto; top:auto; }

  /* Responsividade do header para manter tudo dentro da tela */
  @media (max-width: 1360px) {
    .topbar { padding: 0 16px; gap: 16px; }
    .topbar .user-info { gap: 10px; }
    .topbar .user-info button { padding: 10px 20px; font-size: 16px; }
    #notifBell, #proofsBell { width: 36px; height: 36px; font-size: 18px; }
    .session-badge { font-size: 11px; padding: 6px 10px; gap: 4px; }
  }
  @media (max-width: 1200px) {
    .topbar .user-info { gap: 8px; }
    .topbar .user-info button { padding: 8px 16px; font-size: 15px; }
    .session-badge { transform: scale(0.95); transform-origin: right center; }
  }

  /* Tarja para tags que ainda não estão em vigor (início futuro) */
  .ribbon-future { position:absolute; top:0; left:0; right:0; background:#0d5fb8; color:#fff; font-size:10px; font-weight:700; letter-spacing:.5px; text-align:center; padding:3px 4px 2px; border-radius:4px 4px 0 0; z-index:2; box-shadow:0 2px 4px #0002; }

    /* Modal animations (mantidos) */
    #removeConfirmModal,
    #removeSuccessModal {
      animation: modalFadeIn .3s ease-out;
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
        transform: scale(.95);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

/* ========== SORT CONTROLS ========== */
.sort-wrapper { 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
}
.sort-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 8px 12px; 
  border-radius: 8px; 
  border: 1px solid #0c6749; 
  background: #0c6749; 
  color: #fff; 
  cursor: pointer; 
  font-size: 12px; 
  font-weight: 600;
  transition: all 0.2s;
}
.sort-btn:hover {
  background: #0a553c;
}
.sort-btn.sort-active { 
  background: #108e64; 
  border-color: #108e64; 
}
.sort-direction-btn { 
  padding: 8px 10px; 
  border-radius: 8px; 
  border-left: 1px solid rgba(255,255,255,0.3); 
  margin-left: -1px; 
}
.sort-direction-btn i { 
  font-size: 16px; 
  transition: transform 0.2s ease; 
}
.sort-dropdown { 
  position: absolute; 
  top: calc(100% + 8px); 
  right: 0; 
  min-width: 190px; 
  background: #ffffff; 
  border: 1px solid #d6e2dc; 
  box-shadow: 0 6px 18px rgba(0,0,0,0.16); 
  border-radius: 10px; 
  padding: 6px; 
  display: none; 
  flex-direction: column; 
  z-index: 1500; 
}
.sort-dropdown.open { 
  display: flex; 
}
.sort-option { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 8px 10px; 
  background: #ffffff; 
  border: none; 
  border-radius: 8px; 
  cursor: pointer; 
  font-size: 13px; 
  color: #108e64; 
  text-align: left; 
  transition: background .2s ease, color .2s ease; 
}
.sort-option:hover { 
  background: #e2f2ea; 
}
.sort-option.active { 
  background: #108e64; 
  color: #ffffff; 
}
.sort-option i { 
  width: 16px; 
  text-align: center; 
  color: currentColor; 
}
/* ========== FIM SORT CONTROLS ========== */

/* ========== INDICADOR DE TAG FIXADA (por ADM) ========== */
.pinned-indicator {
  position: absolute;
  top: 12px;
  left: 45px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #0c6749 0%, #108e64 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  cursor: help;

}
.pinned-indicator i {
  color: #fff;
  font-size: 10px;
  transform: rotate(45deg);
  position: absolute;
  right: 7px;
}

/* Tags fixadas têm borda verde mais grossa e sombra especial */

/* Ajusta posição do indicador quando há ribbon (tarja azul) */
.tag .ribbon-future ~ .pinned-indicator {
  top: 32px;
}