:root {
   --bg: #f4f2ed;
   --surface: #ffffff;
   --surface2: #eeece7;
   --ink: #1a1a18;
   --ink-soft: #5a5a54;
   --ink-faint: #9a9a90;
   --accent-all: #1a1a18;
   --tag-radius: 4px;
   --card-radius: 12px;
   --filter-height: 52px;
   --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-zone {
   padding: 20px 0;
   background: var(--surface);
   border-bottom: 1px solid #ddd9d0;
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.filter-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.filter-label {
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink-faint);
   font-family: "Space Mono", monospace;
}
.pill-row {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.pill {
   height: var(--filter-height);
   padding: 0 16px;
   border-radius: 100px;
   border: 1.5px solid #d0ccc4;
   background: transparent;
   cursor: pointer;
   font-family: "Sora", sans-serif;
   font-size: 0.82rem;
   font-weight: 500;
   color: var(--ink-soft);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: all var(--transition);
   white-space: nowrap;
}
.pill:hover {
   border-color: var(--ink);
   color: var(--ink);
   background: var(--surface2);
}
.pill.active {
   border-color: transparent;
   color: #fff;
   background: var(--humusoft-color);
}
.pill .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
   background: var(--humusoft-color);
}
.pill[data-category="all"] .dot {
   background: var(--humusoft-color);
}
.pill[data-category="matlab"] .dot {
   background: var(--matlab-color);
}
.pill[data-category="comsol"] .dot {
   background: var(--comsol-color);
}
.pill[data-category="dspace"] .dot {
   background: var(--dspace-color);
}
.pill[data-category="heavyhorse"] .dot {
   background: var(--heavyhorse-color);
}
.pill.active .dot {
   background: #fff;
}
.pill.active[data-category="matlab"] {
   background: var(--matlab-color);
}
.pill.active[data-category="comsol"] {
   background: var(--comsol-color);
}
.pill.active[data-category="dspace"] {
   background: var(--dspace-color);
}
.pill.active[data-category="heavyhorse"] {
   background: var(--heavyhorse-color);
}

.author-select-wrap {
   position: relative;
}
.select-arrow {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   color: var(--ink-faint);
   font-size: 0.7rem;
}

.reset-btn img{
   width: 16px;
}
.reset-btn {
   height: var(--filter-height);
   padding: 0 18px;
   border-radius: 100px;
   border: 1.5px solid #d0ccc4;
   background: transparent;
   cursor: pointer;
   font-family: "Space Mono", monospace;
   font-size: 0.72rem;
   color: var(--ink-faint);
   transition: all var(--transition);
   letter-spacing: 0.05em;
   align-self: flex-end;
   display: grid;
   place-items: center;
}
.reset-btn:is(:hover, :focus) {
   border-color: var(--humusoft-color);
   color: var(--humusoft-color);
   background-color: color-mix(in srgb, var(--humusoft-color) 10%, rgb(255, 255, 255) 100%);
}

.no-results {
   text-align: center;
   padding: 80px 0;
   color: var(--ink-faint);
   font-size: 0.9rem;
   display: none;
}
.no-results.show {
   display: block;
}
.no-results strong {
   display: block;
   font-size: 1.4rem;
   color: var(--ink-soft);
   margin-bottom: 8px;
   font-family: "Space Mono", monospace;
}