* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.topbar { border-bottom: 1px solid #ddd; padding: 10px; position: sticky; top: 0; background: #fff; z-index: 2; }
.topbar-inner { display:flex; gap:10px; align-items:center; max-width: 1400px; margin: 0 auto; }
.search { width: 80%; max-width: 1100px; padding: 10px 12px; border:1px solid #ccc; border-radius: 8px; }

.content { display:grid; grid-template-columns: 30% 70%; height: calc(100vh - 62px); }
.filters { border-right:1px solid #ddd; padding: 12px; overflow:auto; }
.results { padding: 12px; overflow:auto; }

label { display:block; margin-top: 10px; font-size: 13px; color:#333; }
select, input[type="number"] { width: 100%; padding: 8px 10px; border:1px solid #ccc; border-radius: 8px; margin-top: 6px; }

.btn { padding: 10px 12px; border:1px solid #ccc; background:#fff; border-radius:8px; cursor:pointer; }
.btn:hover { background:#f6f6f6; }
.btn-secondary { width: 100%; margin-top: 12px; }

.btn-tab { padding: 8px 10px; }
.btn-tab-active { border-color:#000; }

.statusline { font-size: 13px; color:#444; margin-bottom: 10px; }

.list { display:flex; flex-direction: column; gap: 10px; }

.card {
  border:1px solid #ddd; border-radius: 10px; padding: 10px;
  display:flex; flex-direction: column; gap: 6px;
}
.card .title { font-weight: 600; }
.card .meta { font-size: 12px; color:#555; display:flex; gap:10px; flex-wrap: wrap; }
.card .paths { font-size: 12px; color:#666; }
.card .actions { display:flex; gap:10px; margin-top: 6px; }

.hidden { display:none; }
.small { margin-top: 12px; font-size: 12px; color:#555; }
.row { display:flex; gap:10px; margin-top: 6px; }