*{box-sizing:border-box;margin:0;padding:0}
body{font:13px/1.6 -apple-system,sans-serif;background:#1c1c1e;color:#e5e5e7;padding:0}

#app{max-width:900px;margin:0 auto;padding:24px 16px}

header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
header h1{font-size:1.1rem;color:#5ac8fa;letter-spacing:.02em}
.badge{font-size:11px;padding:2px 8px;border-radius:10px;background:#2a2a2e;color:rgba(255,255,255,.4)}
.badge.ready{background:rgba(50,215,75,.15);color:#32d74b}
.badge.offline{background:rgba(255,69,58,.15);color:#ff453a}

.search-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.search-bar input[type=text]{flex:1 1 220px;min-width:0;padding:7px 12px;background:#2a2a2e;color:#e5e5e7;
  border:1px solid rgba(255,255,255,.15);border-radius:6px;font:13px -apple-system,sans-serif;outline:none}
.search-bar input[type=text]:focus{border-color:#5ac8fa}
.search-bar select,.search-bar input[type=number]{
  padding:7px 8px;background:#2a2a2e;color:#e5e5e7;
  border:1px solid rgba(255,255,255,.15);border-radius:6px;font:12px -apple-system,sans-serif}
.search-bar input[type=number]{width:52px;text-align:center}
.search-bar button{padding:7px 16px;background:#5ac8fa;color:#000;border:none;
  border-radius:6px;font:13px -apple-system,sans-serif;cursor:pointer;font-weight:600}
.search-bar button:hover{background:#7dd8fb}

#status-line{font-size:11px;color:rgba(255,255,255,.3);min-height:16px;margin-bottom:10px}
#status-line.err{color:#ff453a}

.results{display:flex;flex-direction:column;gap:8px}
.card{background:#2a2a2e;border:1px solid rgba(255,255,255,.08);border-radius:7px;
  padding:10px 13px;cursor:pointer;transition:border-color .12s}
.card:hover{border-color:rgba(90,200,250,.35)}
.card.open{border-color:rgba(90,200,250,.55)}
.card-head{display:flex;align-items:baseline;gap:8px}
.score{font-size:11px;font-family:monospace;color:rgba(255,255,255,.3);flex-shrink:0}
.score.g{color:#32d74b}.score.y{color:#ffd60a}
.path{font-size:11px;color:#5ac8fa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.body{display:none;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;line-height:1.55;color:rgba(255,255,255,.7);white-space:pre-wrap;word-break:break-word}
.card.open .body{display:block}
.actions{display:none;gap:6px;margin-top:8px}
.card.open .actions{display:flex}
.actions button{font-size:11px;padding:3px 9px;background:#2a2a2e;color:#e5e5e7;
  border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}
.actions button:hover{border-color:#5ac8fa;color:#5ac8fa}
.empty{color:rgba(255,255,255,.25);font-size:12px;text-align:center;margin-top:32px}

/* doc list */
select option{background:#2a2a2e}