#tool-body *{ box-sizing: border-box; margin: 0; padding: 0; }
#tool-body  { font-family: system-ui, -apple-system, sans-serif; background: #f5f4f0; color: #1a1a1a; padding: 1.5rem; }
#tool-body .title { font-size: 20px; font-weight: 500; margin-bottom: 1.25rem; color: #1a1a1a; }
#tool-body .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; align-items: center; }
#tool-body .search-box { flex: 1; min-width: 160px; padding: 8px 12px; font-size: 14px; border: 0.5px solid #ccc; border-radius: 8px; background: #fff; color: #1a1a1a; outline: none; }
#tool-body .search-box:focus { border-color: #888; }
#tool-body .filter-btns { display: flex; flex-wrap: wrap; gap: 6px; }
#tool-body .fbtn { padding: 5px 12px; font-size: 13px; border: 0.5px solid #ccc; border-radius: 20px; background: transparent; color: #555; cursor: pointer; transition: all .15s; white-space: nowrap; }
#tool-body .fbtn:hover { background: #eee; }
#tool-body .fbtn.active { background: #dbeafe; color: #1e40af; border-color: transparent; }
#tool-body .stats { font-size: 13px; color: #777; margin-bottom: 1rem; }
#tool-body .cat-section { margin-bottom: 1.5rem; }
#tool-body .cat-title { font-size: 14px; font-weight: 500; color: #555; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
#tool-body .cat-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eee; color: #666; font-weight: 400; }
#tool-body .words { display: flex; flex-wrap: wrap; gap: 6px; }
#tool-body .word-chip { font-size: 13px; padding: 4px 10px; border-radius: 8px; border: 0.5px solid #ddd; background: #fff; color: #1a1a1a; cursor: default; }
#tool-body .word-chip.diff-easy { border-left: 3px solid #1D9E75!important; }
#tool-body .word-chip.diff-med { border-left: 3px solid #EF9F27!important; }
#tool-body .word-chip.diff-hard { border-left: 3px solid #E24B4A!important; }
#tool-body .empty { color: #aaa; font-size: 14px; padding: 2rem 0; text-align: center; }
#tool-body .legend { display: flex; gap: 16px; font-size: 12px; color: #777; margin-bottom: 1rem; flex-wrap: wrap; }
#tool-body .leg-item { display: flex; align-items: center; gap: 5px; }
#tool-body .leg-dot { width: 10px; height: 10px; border-radius: 2px; }

.theme-dark-mode #tool-body { background: #1a1a1a; color: #e0e0e0; }
.theme-dark-mode #tool-body .title { color: #e0e0e0; }
.theme-dark-mode #tool-body .search-box { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.theme-dark-mode #tool-body .search-box:focus { border-color: #666; }
.theme-dark-mode #tool-body .fbtn { border-color: #444; color: #aaa; }
.theme-dark-mode #tool-body .fbtn:hover { background: #2a2a2a; }
.theme-dark-mode #tool-body .fbtn.active { background: #1e3a5f; color: #7ab3f0; border-color: transparent; }
.theme-dark-mode #tool-body .stats { color: #888; }
.theme-dark-mode #tool-body .cat-title { color: #aaa; }
.theme-dark-mode #tool-body .cat-badge { background: #2a2a2a; color: #888; }
.theme-dark-mode #tool-body .word-chip { background: #2a2a2a; border-color: #3a3a3a; color: #d2d2d2; }
.theme-dark-mode #tool-body .empty { color: #555; }
.theme-dark-mode #tool-body .legend { color: #888; }