:root {
  --bg: #0f172a;
  --panel: #111827;
  --text: #e5e7eb;
  --accent: #60a5fa;
  --muted: #9ca3af;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "DejaVu Sans";
  color: var(--text); background: var(--bg);
}
header { padding: 1rem; border-bottom: 1px solid #1f2937; }
h1 { margin: 0 0 .5rem 0; font-size: 1.2rem; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.controls .filter { display: inline-flex; gap: .5rem; align-items: center; }
main { display: grid; grid-template-columns: 1fr 360px; gap: 0; min-height: calc(100vh - 96px); }
#cloud { padding: 1rem; }
#details { background: var(--panel); border-left: 1px solid #1f2937; padding: 0; display: grid; grid-template-rows: 1fr 1fr; }
#right-top, #right-bottom { padding: 1rem; }
#right-top { border-bottom: 1px solid #1f2937; overflow: hidden; display: flex; flex-direction: column; }
#right-bottom { overflow-y: auto; }
#details h2 { margin: 0 0 .5rem 0; font-size: 1rem; }
.word { cursor: pointer; transition: opacity .15s ease; }
.word:hover { opacity: 0.8; }
#searchBox { padding: .4rem .6rem; border-radius: .4rem; border: 1px solid #374151; background: #0b1021; color: var(--text); }
.list { margin: .5rem 0 0 0; padding: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; padding: .25rem 0; border-bottom: 1px dashed #1f2937; }
.count { color: var(--muted); }
/* Spodnji seznam po frekvencah */
#freq-list { margin: 0; padding: 0; list-style: none; }
#freq-list li { border-bottom: 1px dashed #1f2937; }
.freq-item { width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; padding: .5rem .25rem; display: flex; justify-content: space-between; gap: .75rem; cursor: pointer; }
.freq-item:hover, .freq-item:focus { background: rgba(255,255,255,.04); outline: 1px solid #1f2937; }
.freq-item .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freq-item .c { color: var(--muted); flex: none; }
#no-data { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  #details { grid-template-rows: auto auto; }
}