.showcase-tag-tools { display:grid; gap:.35rem; align-self:end; margin-bottom:7px; }
.showcase-tag-search { margin-bottom:7px; }
.showcase-tag-tools .visual-result-count { margin:0; padding:0; line-height:1.2; white-space:nowrap; }
.showcase-tag-button { padding:11px 12px; border:1px solid var(--border-strong); border-radius:4px; color:var(--text); background:var(--surface-strong); font-size:13px; }
.showcase-tag-button:hover { background:var(--accent-soft); }
.showcase-tag-button:disabled, .showcase-tag-icon:disabled { opacity:.45; cursor:wait; }
.showcase-tag-searchbox { position:relative; display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; min-height:36px; padding:3px 8px; border:1px solid var(--border); border-radius:4px; background:var(--input-surface); }
.showcase-tag-searchbox:focus-within { border-color:var(--accent); }
.showcase-tag-searchbox > input.input { min-width:70px; width:0; flex:1 1 70px; padding:5px 0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none; }
.showcase-tag-pills { display:contents; }
.showcase-tag-pill { max-width:100%; padding:4px 6px; border:1px solid var(--border-strong); border-radius:20px; background:var(--accent-soft); color:var(--text); font-size:11px; overflow-wrap:anywhere; }
.showcase-tag-suggestions { position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; max-height:240px; overflow-y:auto; display:grid; gap:3px; padding:7px; border:1px solid var(--border-strong); border-radius:5px; background:var(--surface); box-shadow:0 12px 30px #0004; }
.showcase-tag-option { width:100%; text-align:left; padding:9px; border:0; background:transparent; color:var(--text); border-radius:3px; font-size:13px; overflow-wrap:anywhere; }
.showcase-tag-option:hover, .showcase-tag-option:focus-visible { background:var(--surface-strong); }
.showcase-tag-dialog { width:min(760px,calc(100vw - 32px)); aspect-ratio:16/9; max-height:calc(100dvh - 40px); padding:22px; border:1px solid var(--border-strong); border-radius:9px; background:color-mix(in srgb,var(--surface) 94%,transparent); color:var(--text); box-shadow:0 24px 80px #0008; overflow:hidden; }
.showcase-tag-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.showcase-tag-dialog::backdrop { background:#0006; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.showcase-tag-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.showcase-tag-heading h2 { margin:0; font-size:21px; font-weight:600; }
.showcase-tag-help { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.showcase-tag-list { flex:1 1 auto; min-height:64px; overflow-y:auto; border-block:1px solid var(--border); }
.showcase-tag-row { display:flex; align-items:center; gap:12px; padding:7px 0; min-height:43px; border-bottom:1px solid var(--border); }
.showcase-tag-row:last-child { border-bottom:0; }
.showcase-tag-name, .showcase-tag-name-input { flex:1; min-width:0; font-size:14px; overflow-wrap:anywhere; }
.showcase-tag-name-input { width:0; padding:7px; border:1px solid var(--border-strong); border-radius:4px; background:var(--input-surface); color:var(--text); }
.showcase-tag-actions { display:flex; gap:5px; flex:none; }
.showcase-tag-icon { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid var(--border); border-radius:4px; padding:6px; color:var(--muted); background:transparent; }
.showcase-tag-icon svg { width:100%; height:100%; }
.showcase-tag-icon:hover { color:var(--text); background:var(--surface-strong); }
.showcase-tag-create { display:flex; gap:9px; }
.showcase-tag-create input { flex:1; min-width:0; padding:9px; border:1px solid var(--border); border-radius:4px; background:var(--input-surface); color:var(--text); font-size:13px; }
.showcase-tag-message { min-height:16px; margin:0; color:var(--muted); font-size:12px; }
.showcase-tag-status { margin:0; padding:10px; border:1px solid var(--border); border-radius:4px; color:var(--muted); font-size:12px; }
.showcase-project-tags { display:flex; flex-wrap:wrap; align-items:center; align-self:end; justify-content:flex-start; gap:5px; min-height:30px; }
.showcase-project-tags .showcase-tag-icon { margin-left:auto; width:26px; height:26px; padding:5px; }
.showcase-project-tag { padding:4px 7px; border:1px solid var(--border-strong); border-radius:20px; background:var(--surface-strong); color:var(--text); font-size:11px; overflow-wrap:anywhere; }
.showcase-tag-menu { position:fixed; z-index:1000; width:260px; max-width:calc(100vw - 16px); max-height:min(480px,calc(100dvh - 16px)); display:grid; gap:4px; padding:10px; overflow:auto; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--text); box-shadow:0 12px 45px #0006; }
.showcase-tag-menu-heading { margin:0 0 4px; font-size:12px; color:var(--muted); }
.showcase-tag-menu-item { display:flex; align-items:center; gap:8px; text-align:left; padding:8px; border:0; border-radius:4px; background:transparent; color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.showcase-tag-menu-item span { width:16px; flex:none; }
.showcase-tag-menu-item:hover, .showcase-tag-menu-item[aria-checked=true] { background:var(--surface-strong); }
@media(max-width:600px) {
  .showcase-tag-dialog { aspect-ratio:auto; min-height:320px; padding:16px; }
  .showcase-tag-create { flex-wrap:wrap; }
  .showcase-tag-create input { flex-basis:100%; }
  .showcase-tag-create .showcase-tag-button { width:100%; }
}