/* community.css — all community page CSS here */

:root{--line:#1d2230;--chip:#131a2a;--chip-line:#24304a;--text:#e7ecff;--muted:#9aa4b4;}

/* Moodbar */
.moodbar{
  height:6px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:2px; margin:8px 0 0; border-radius:999px; border:1px solid var(--line);
  background:#0e1422; overflow:hidden; box-shadow: inset 0 1px 0 #ffffff10;
}
.mb-cell{ height:100%; filter:saturate(1.15); opacity:.95; cursor:pointer; }
.mb-cell.selected{ outline:2px solid #ffffff33; filter:saturate(1.4) brightness(1.05); }
.mb-tip{ position:absolute; transform:translateX(-50%); top:-22px; left:0; padding:2px 8px;
  font-size:12px; background:#0d1222; color:var(--text); border:1px solid var(--line);
  border-radius:999px; pointer-events:none; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:2; }

/* Filter HUD */
#filterHud{ display:none; max-width:1080px; margin:8px auto 0; padding:0 20px; }
#filterHud .hud-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--chip-line); background:var(--chip); box-shadow: inset 0 1px 0 #ffffff0f;
}
#filterHud .hud-clear{ margin-left:8px; padding:6px 10px; border-radius:10px; cursor:pointer;
  border:1px solid var(--chip-line); background:var(--chip); color:var(--text); }

/* Searchbar */
.np-search{ margin:10px 0 0; }
.np-search-box{ display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:12px; padding:8px 10px; background:var(--chip); box-shadow: inset 0 1px 0 #ffffff10; }
.np-s-ico{ font-size:12px; color:var(--muted); border:1px solid var(--chip-line); border-radius:8px; padding:2px 6px; }
.np-search-box input{ flex:1; background:transparent; color:var(--text); border:none; outline:none; font:inherit; }
.np-search-box button{ border:1px solid var(--chip-line); background:var(--chip); color:var(--text);
  border-radius:10px; padding:6px 8px; cursor:pointer; }

/* Tags */
.np-tags .np-tags-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.np-tags .np-tags-h h4{ margin:0; color:#c6d2ff; letter-spacing:.3px; }
.np-tags .np-tags-h .np-tags-clear{ border:1px solid var(--chip-line); background:var(--chip); color:var(--text);
  border-radius:10px; padding:6px 10px; cursor:pointer; }
.np-tags-list{ display:flex; flex-wrap:wrap; gap:8px; }
.np-tagchip{ display:inline-flex; gap:6px; align-items:center; border:1px solid var(--chip-line);
  background:var(--chip); color:var(--text); border-radius:999px; padding:6px 10px; cursor:pointer; }
.np-tagchip em{ color:#9aa4b4; font-style:normal; font-size:12px; }
.np-tagchip.active{ box-shadow:0 0 0 2px color-mix(in oklab, #66e6ff 45%, transparent); }