:root{
  --bg:#f6f8fb; --card:#ffffff; --text:#0b1320; --muted:#6b7280; --accent:#2563eb; --bad:#dc2626;
}
[data-theme="dark"]{ --bg:#07101a; --card:#0f1724; --text:#e6eef8; --muted:#9aa6b2; --accent:#60a5fa; --bad:#fb7185; }

*{box-sizing:border-box}
body{margin:0;font-family:Verdana,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(90deg,rgba(0,0,0,0.03),transparent)}
.wrap{display:flex;gap:16px;max-width:1200px;margin:18px auto;padding:0 16px}
.panel{flex:0 0 340px}
.main{flex:1;display:flex;flex-direction:column;gap:12px}
.box{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 6px 20px rgba(2,6,23,0.06)}
.filebox{display:inline-flex;align-items:center;gap:10px;padding:10px;border:1px dashed var(--muted);border-radius:8px;cursor:pointer}
.filebox input{display:none}
.or{color:var(--muted);margin-top:10px;font-size:13px}
textarea{width:100%;margin-top:8px;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent;color:var(--text)}
.row{display:flex;gap:8px;margin-top:8px}
.row button{padding:8px 10px;border-radius:8px;border:0;background:var(--accent);color:white;cursor:pointer}
.stats{margin-top:10px;color:var(--muted)}
.controls{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.controls button{padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent;cursor:pointer}
.wordsBox{min-height:180px;overflow:auto}
.boxHeader{font-weight:600;margin-bottom:8px}
.wordsContainer{display:flex;flex-wrap:wrap;gap:8px}
.wordChip{padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,0.06);background:transparent;cursor:pointer;user-select:none}
.wordChip .count{font-size:12px;color:var(--muted);margin-left:6px}
.wordChip.minus{background:var(--bad);color:white;border-color:transparent}
.phrasesContainer{max-height:520px;overflow:auto;border-top:1px solid rgba(0,0,0,0.04);padding-top:8px}
.phraseRow{padding:8px;border-bottom:1px solid rgba(0,0,0,0.03);display:flex;gap:12px;align-items:flex-start}
.phraseRow.excluded{opacity:0.35}
.phraseText{flex:1;line-height:1.4}
.word-in-phrase{padding:2px 4px;border-radius:4px;cursor:pointer}
.word-in-phrase:hover{background:rgba(0,0,0,0.04)}
.word-in-phrase.minus{background:var(--bad);color:white}
.word-in-phrase.hover{outline:2px solid rgba(0,0,0,0.06)}
.hilite{background:yellow;padding:0 2px;border-radius:2px}
.hint{font-size:13px;color:var(--muted);margin-top:12px}
.foot{text-align:center;padding:12px;color:var(--muted)}
@media (max-width:900px){.wrap{flex-direction:column}.panel{order:2}}
.word-in-phrase { display: inline-block; margin: 0 1px; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.word-in-phrase.minus { background: #dc2626; color: #fff; }
.word-in-phrase.hover { outline: 2px solid rgba(37, 99, 235, 0.5); background: rgba(37, 99, 235, 0.15); }
/* Контейнер фраз */
.phrasesContainer {
  max-height: 520px;
  overflow-y: auto;
  border-top: 1px solid rgba(0,0,0,0.04);
  padding-top: 8px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Каждая фраза */
.phraseRow {
  display: flex;
  flex-wrap: wrap; /* чтобы слова переносились красиво */
  align-items: flex-start;
  gap: 4px; /* расстояние между словами */
  padding: 4px 0;
}

/* Слова внутри фразы */
.word-in-phrase {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, color 0.2s, outline 0.2s;
}

/* Hover */
.word-in-phrase:hover {
  background: rgba(37, 99, 235, 0.2);
  color: #2563eb;
}

/* Минус-слово */
.word-in-phrase.minus {
  background: #dc2626;
  color: #fff;
}

/* Подсветка всех вхождений при hover */
.word-in-phrase.hover {
  outline: 2px solid rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.15);
}

/* Контейнер чипов слов */
.wordChip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  cursor: pointer;
  margin: 2px;
  display: inline-block;
  font-size: 13px;
  user-select: none;
  transition: background 0.2s, color 0.2s;
  font-family: Verdana;
}

/* Минус-слово в чипе */
.wordChip.minus {
  background: #dc2626;
  color: #fff;
  border-color: transparent;
}

/* Hover чип */
.wordChip:hover {
  background: rgba(37, 99, 235, 0.2);
  color: #2563eb;
}

/* Статистика */
.stats {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 14px;
}

/* Scrollbar для контейнера фраз */
.phrasesContainer::-webkit-scrollbar {
  width: 6px;
}
.phrasesContainer::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}
.phrasesContainer::-webkit-scrollbar-track {
  background: transparent;
}

#message{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 9999;
}
  .tabs { display:flex; gap:8px; margin-bottom:8px; }
  .tabBtn { padding:6px 10px; cursor:pointer; }
  .tabBtn.active { background:#eee; font-weight:700; }
  .phraseRow.selected-phrase { background: rgba(100,150,255,0.08); }
  .phraseRow.minus-phrase { opacity: 0.6; }
  .word-in-phrase.minus { text-decoration: line-through; }
  #phrasesContainer { height: 400px; overflow: auto; } // must have fixed height
  .phraseRow { display:flex; align-items:center; gap:8px; padding:0 6px; box-sizing:border-box; }
  .phraseText { flex:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .minusPhraseBtn { flex:0 0 auto; }