/* v54 — one focused search field and two native filters; catalogue stays dense. */
.browse-tools { display:flex; align-items:flex-end; gap:12px; margin:2px 0 10px; }
.search-form { position:relative; flex:1 1 440px; min-width:0; display:block; height:auto; padding:0; border:1px solid #373043; border-radius:12px; background:#1a1a25; overflow:visible; box-shadow:none; }
.search-form:focus-within { border-color:#b2a0ff; box-shadow:0 0 0 2px #b2a0ff22; }
.search-field { position:relative; display:flex; align-items:center; min-height:52px; min-width:0; padding:0 5px 0 14px; }
.search-icon { flex:none; margin-right:9px; color:#b2a0ff; font:26px/1 system-ui,sans-serif; }
#story-search { position:relative; flex:1 1 auto; min-width:0; width:100%; height:50px; margin:0; padding:12px 3px; border:0; background:transparent; color:#f4f2ff; font:400 15px/1.6 var(--yoru-font); outline:0; }
#story-search::placeholder { color:#aaa7ba; opacity:1; }
#story-search::-webkit-search-cancel-button { display:none; }
#clear-search { flex:0 0 44px; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:#c1b2ff; font-size:23px; }
#clear-search:hover { background:#2c2442; }
#search-typewriter { position:absolute; inset:14px 53px 12px 43px; display:block; overflow:hidden; white-space:nowrap; color:#aaa7ba; font:400 15px/1.6 var(--yoru-font); pointer-events:none; }
#search-typewriter::after { content:'▏'; color:#b2a0ff; }
.search-form[data-typewriting="true"] #story-search::placeholder { color:transparent; }
#search-suggestions { position:absolute; z-index:80; top:calc(100% + 7px); left:0; right:0; margin:0; padding:5px; list-style:none; max-height:min(330px,55dvh); overflow:auto; overscroll-behavior:contain; border:1px solid #49405c; border-radius:11px; background:#1a1723; box-shadow:0 12px 28px #0006; }
#search-suggestions [role="option"] { display:flex; align-items:center; width:100%; min-height:44px; margin:0; padding:10px 12px; border:0; border-radius:7px; background:transparent; color:#f4f2ff; font:500 14px/1.55 var(--yoru-font); text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
#search-suggestions [role="option"]:hover,#search-suggestions [role="option"][aria-selected="true"] { background:#2c2442; color:#e3daff; }
.catalog-filters { display:grid; grid-template-columns:minmax(118px,.8fr) minmax(164px,1.2fr); flex:0 1 360px; gap:8px; min-width:0; }
.catalog-filters label { display:flex; flex-direction:column; gap:4px; min-width:0; color:#aaa7ba; font:500 12px/1.4 var(--yoru-font); }
.catalog-filters select { display:block; width:100%; min-width:0; min-height:44px; margin:0; padding:9px 28px 9px 11px; border:1px solid #373043; border-radius:9px; background:#181720; color:#f4f2ff; font:500 14px/1.6 var(--yoru-font); cursor:pointer; color-scheme:dark; }
.catalog-filters select:focus-visible { outline:3px solid #b2a0ff; outline-offset:2px; }
.catalog-status { margin-top:0; }
@media(max-width:800px) {
 .browse-tools { flex-wrap:wrap; gap:9px; }
 .search-form { flex-basis:100%; }
 .catalog-filters { flex:1 1 100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .catalog-filters label { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .search-form { transition:none; } }
#search-suggestions [role="option"] { gap:12px; }
#search-suggestions [role="option"] > span { flex:1 1 auto; min-width:0; }
#search-suggestions [role="option"] > small { flex:none; color:#aaa7ba; font:400 12px/1.5 var(--yoru-font); }
#search-suggestions .search-empty { padding:12px; color:#aaa7ba; font-size:14px; }