:root { --bg:#1a1a2e; --surface:#16213e; --surface2:#0f3460; --accent:#e94560;
  --text:#eaeaea; --text-muted:#a0a0b0; --border:#2a2a4a; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--surface); padding:1rem 2rem; border-bottom:1px solid var(--border); }
header h1 { font-size:1.25rem; color:var(--accent); }
main { display:flex; gap:1.5rem; padding:1.5rem; flex:1; }
#filter-panel { width:320px; min-width:320px; background:var(--surface); border-radius:8px; padding:1rem; border:1px solid var(--border); }
.filter-group { margin-bottom:1rem; }
.filter-group label { display:block; font-size:0.85rem; color:var(--text-muted); margin-bottom:0.25rem; }
.filter-group input,.filter-group select { width:100%; padding:0.4rem 0.6rem; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:4px; }
.filter-group input[type=checkbox] { width:auto; }
.filter-collapsible summary { cursor:pointer; color:var(--accent); }
.resistance-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.filter-actions { display:flex; gap:0.5rem; margin-top:1rem; }
.btn-primary { background:var(--accent); color:white; border:none; padding:0.5rem 1.5rem; border-radius:4px; cursor:pointer; }
.btn-secondary { background:transparent; color:var(--text-muted); border:1px solid var(--border); padding:0.5rem 1.5rem; border-radius:4px; cursor:pointer; }
#results { flex:1; min-width:0; }
#result-meta { font-size:0.85rem; color:var(--text-muted); margin-bottom:0.5rem; }
table { width:100%; border-collapse:collapse; }
th { background:var(--surface2); padding:0.5rem 0.75rem; text-align:left; font-size:0.85rem; }
td { padding:0.4rem 0.75rem; font-size:0.85rem; border-bottom:1px solid var(--border); }
tr[data-entry] { cursor:pointer; }
tr[data-entry]:hover { background:var(--surface); }
.pagination { display:flex; align-items:center; gap:0.25rem; margin-top:1rem; }
.pagination button { background:var(--surface); color:var(--text); border:1px solid var(--border); padding:0.3rem 0.7rem; border-radius:4px; cursor:pointer; font-size:0.8rem; }
.pagination .current { background:var(--accent); color:white; padding:0.3rem 0.7rem; border-radius:4px; font-size:0.8rem; }
#detail-panel { position:fixed; top:0; right:0; width:500px; height:100vh; background:var(--surface); border-left:1px solid var(--border); padding:1.5rem; overflow-y:auto; z-index:100; box-shadow:-4px 0 20px rgba(0,0,0,0.5); }
#detail-panel.hidden { display:none; }
.badge { padding:0.2rem 0.6rem; border-radius:4px; font-size:0.75rem; font-weight:600; display:inline-block; }
.badge-quest { background:#10b981; color:white; }
.badge-train { background:#6366f1; color:white; }
.badge-vend { background:#f59e0b; color:white; }
.badge-taxi { background:#3b82f6; color:white; }
.badge-repair { background:#ef4444; color:white; }
.badge-flight { background:#8b5cf6; color:white; }
.detail-section { margin-top:1rem; }
.detail-section h3 { font-size:0.9rem; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:0.3rem; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.3rem; }
.stat { display:flex; justify-content:space-between; font-size:0.85rem; padding:0.2rem 0; }
.stat .label { color:var(--text-muted); }
.toast { position:fixed; bottom:1rem; right:1rem; background:var(--accent); color:white; padding:0.75rem 1rem; border-radius:6px; z-index:200; }
.toast.hidden { display:none; }
#empty-state { text-align:center; padding:2rem; color:var(--text-muted); }
#empty-state.hidden { display:none; }
@media (max-width:768px) { main { flex-direction:column; } #filter-panel { width:100%; min-width:unset; } #detail-panel { width:100%; } }