.slider-row{display:flex;align-items:center;gap:10px;}
.slider-val{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;color:var(--gold);min-width:38px;text-align:right;
}

.tag-input-wrap{position:relative;}
.tag-status{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:12px;pointer-events:none;
}
.tag-status.ok{color:#7dd88a;}
.tag-status.spin{color:var(--muted);}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:4px 6px 4px 10px;border-radius:20px;
}
.chip.include{background:rgba(91,155,213,.15);color:var(--accent);border:1px solid rgba(91,155,213,.3);}
.chip.exclude{background:rgba(226,121,90,.13);color:var(--danger);border:1px solid rgba(226,121,90,.3);}
.chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:2px;}

.suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--panel-2);
  border:1px solid var(--panel-edge);
  border-radius:8px;overflow:hidden;z-index:10;
  max-height:200px;overflow-y:auto;display:none;
  scrollbar-width:thin;
  scrollbar-color:var(--panel-edge) transparent;
}
.suggest::-webkit-scrollbar{width:7px;}
.suggest::-webkit-scrollbar-track{background:transparent;}
.suggest::-webkit-scrollbar-thumb{background:var(--panel-edge);border-radius:20px;}
.suggest::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}
.suggest.open{display:block;}
.suggest button{
  display:block;width:100%;text-align:left;background:none;border:none;
  color:var(--text);font-size:13px;padding:8px 10px;cursor:pointer;
}
.suggest button.active, .suggest button:hover{background:var(--panel);} /* .active is the keyboard-highlighted row, not just mouse hover */
.suggest button small{color:var(--muted);margin-left:6px;}
.suggest .empty{padding:9px 10px;font-size:12.5px;color:var(--muted);} /* used for both "Searching tags..." and "No matching tag found" */

.length-grid{display:flex;flex-wrap:wrap;gap:6px;}
.len-toggle{
  font-size:11.5px;padding:6px 10px;border-radius:20px;
  background:var(--panel-2);border:1px solid var(--panel-edge);
  color:var(--muted);cursor:pointer; /* also reused for the AND/OR mode toggle buttons, not just length */
}
.len-toggle.active{background:rgba(226,178,86,.15);border-color:rgba(226,178,86,.4);color:var(--gold);}

/* Shared by the sidebar's own checkboxes, plus the modal's and footer's reveal-related
   checkboxes, all of which reuse this same row layout. */
.check-row{display:flex;align-items:center;gap:8px;}
.check-row label{margin:0;font-family:'Sora',sans-serif;font-size:13px;text-transform:none;letter-spacing:0;color:var(--text);}
.check-row.subtle-check{margin-top:4px;margin-left:24px;opacity:.75;} /* nests the partial-English/MTL checkboxes under the one they depend on */
.check-row.subtle-check label{font-size:12px;color:var(--muted);}

.generate-btn{
  width:100%;margin-top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;
  color:var(--bg-0);background:var(--gold);border:none;border-radius:10px;
  padding:11px;cursor:pointer;transition:background .15s ease, transform .15s ease;
}
.generate-btn:hover{background:#eec06b;}
.generate-btn:active{transform:scale(.99);}
.generate-btn:disabled{opacity:.55;cursor:default;}

.reset-link{
  display:block;width:100%;text-align:center;margin-top:8px;
  font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer;
  text-decoration:underline;
}