/* TikTok Hashtags — только своё. Общее (tabs, form-card, field, filters-row,
   btn, loader, result, checkbox) из ui.css. */

.main{max-width:720px}

/* ── table ── */
.result-table-wrap{margin-top:1.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ht-table{
  width:100%;border-collapse:collapse;font-size:.82rem;table-layout:auto;
}
.ht-table th{
  text-align:left;padding:.6rem .75rem;
  font-weight:600;color:var(--text-dim);
  border-bottom:1px solid var(--border);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;
}
.ht-table td{
  padding:.6rem .75rem;color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.04);
  white-space:nowrap;
}
.ht-table .tag-cell{white-space:normal;word-break:break-word;max-width:260px}
.ht-table .num-cell{text-align:right}
.ht-table .diff-cell{text-align:center}
.ht-table .trend-cell{width:90px}
.ht-table .rank-cell{width:1%}
.ht-table tbody tr:hover{background:rgba(124,58,237,.06)}
.ht-tag{color:var(--violet-lite);font-weight:600}
.trend-up{color:var(--success)}
.trend-down{color:var(--danger)}
.trend-flat{color:var(--text-dimmer)}

/* ── sparkline ── */
.sparkline{vertical-align:middle}
.sparkline-lg{display:block;width:100%;max-width:100%}

/* ── rank badges ── */
.rank-cell{white-space:nowrap}
.rank-num{font-weight:700;margin-right:.3rem}
.rank-up{color:var(--success);font-size:.72rem;font-weight:600}
.rank-down{color:var(--danger);font-size:.72rem;font-weight:600}
.rank-same{color:rgba(255,255,255,.3);font-size:.72rem}
.rank-new{
  font-size:.6rem;font-weight:700;letter-spacing:.04em;
  background:var(--accent-soft-2);color:var(--violet-lite);
  padding:.15rem .35rem;border-radius:4px;
}
.promoted-badge{
  font-size:.6rem;font-weight:600;letter-spacing:.04em;
  background:var(--warn-soft);color:var(--warn);
  padding:.1rem .3rem;border-radius:4px;
}

/* ── creators ── */
.creators-row{display:flex;gap:0}
.creator-avatar{
  width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(0,0,0,.6);margin-left:-6px;
  object-fit:cover;
}
.creator-avatar:first-child{margin-left:0}

/* ── detail card ── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.detail-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.75rem;
}
.detail-item .dl{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dimmer);margin-bottom:.25rem}
.detail-item .dv{font-size:1.1rem;font-weight:600;color:#fff}
.stat-secondary{font-size:.78rem;font-weight:400;color:var(--text-dim)}
.detail-full{grid-column:1/-1}
.detail-desc{font-size:.82rem;font-weight:400;color:var(--text-dim);margin-top:.35rem;line-height:1.5}
.detail-link{
  display:inline-block;margin-top:.4rem;font-size:.78rem;
  color:var(--violet-lite);text-decoration:none;font-weight:500;
}
.detail-link:hover{text-decoration:underline}

/* ── bar charts ── */
.bars-wrap{display:grid;grid-template-columns:max-content 1fr auto;gap:.4rem .5rem;font-size:.82rem;font-weight:400;align-items:center}
.bar-row{display:contents}
.bar-label{color:var(--text-dim);font-size:.78rem;white-space:nowrap}
.bar-track{flex:1;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--violet-lite));transition:width .4s ease}
.bar-val{min-width:30px;text-align:right;font-size:.75rem;color:var(--text-dim);font-weight:500}

/* ── related tags ── */
.related-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.related-tag{
  display:inline-block;padding:.3rem .6rem;border-radius:6px;
  background:var(--accent-soft);border:1px solid var(--accent-border);
  color:var(--violet-lite);font-size:.78rem;font-weight:600;
  text-decoration:none;transition:all .2s;
}
.related-tag:hover{background:var(--accent-soft-2);border-color:var(--accent-border-2)}

/* ── video thumbnails ── */
.videos-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;
}
.video-thumb{
  display:block;border-radius:6px;overflow:hidden;
  aspect-ratio:9/16;background:var(--surface);
  border:1px solid var(--border);transition:border-color .2s;
}
.video-thumb:hover{border-color:var(--accent-border-2)}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ── creators in detail ── */
.creators-detail{display:flex;flex-wrap:wrap;gap:.5rem}
.creator-chip{
  display:flex;align-items:center;gap:.4rem;
  padding:.3rem .6rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  font-size:.78rem;font-weight:500;color:rgba(255,255,255,.7);
}
.creator-avatar-lg{width:22px;height:22px;border-radius:50%;object-fit:cover}

/* ── адаптив ── */
@media (max-width:600px){
  .detail-grid{grid-template-columns:1fr}
  .bar-label{max-width:110px;overflow:hidden;text-overflow:ellipsis}
}