.main{
  position:relative;z-index:1;flex:1;
  max-width:720px;width:100%;margin:0 auto;padding:3rem 2rem 4rem;
}
.page-title{
  font-size:2rem;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(135deg,#e0e7ff 0%,#a78bfa 50%,#7c3aed 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-sub{
  margin-top:.5rem;font-size:.95rem;color:rgba(255,255,255,.4);font-weight:300;
}
.divider{
  width:100%;height:1px;margin:2rem 0;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.4),transparent);
}

/* ── back link ── */
.back-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;color:rgba(255,255,255,.4);text-decoration:none;
  transition:color .2s;margin-bottom:1.25rem;
}
.back-link:hover{color:rgba(255,255,255,.8)}
.back-link svg{width:16px;height:16px}

/* ── tabs ── */
.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.tab{
  padding:.45rem 1rem;border-radius:8px;font-size:.82rem;font-weight:500;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.45);cursor:pointer;transition:all .2s;
  letter-spacing:.02em;
}
.tab:hover{border-color:rgba(124,58,237,.3);color:rgba(255,255,255,.7)}
.tab.active{
  background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.4);color:#a78bfa;
}

/* ── form ── */
.form-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:1.75rem;
}
.filters-row{display:flex;gap:1rem;flex-wrap:wrap}
.field{margin-bottom:1rem}
.field-half{flex:1 1 45%}
.field-third{flex:1 1 30%}
.field label{
  display:block;font-size:.75rem;font-weight:500;
  color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.4rem;
}
.field input,.field select{
  width:100%;padding:.6rem .85rem;border-radius:8px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  color:#fff;font-size:.88rem;font-family:inherit;
  outline:none;transition:border-color .2s;box-sizing:border-box;
}
.field input::placeholder{color:rgba(255,255,255,.2)}
.field input:focus,.field select:focus{border-color:rgba(124,58,237,.5)}
.field select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
}
.field select option{background:#1a1a1a;color:#fff}
.checkbox-label{
  display:flex!important;align-items:center;gap:.5rem;
  cursor:pointer;text-transform:none!important;font-size:.88rem!important;
  color:rgba(255,255,255,.5)!important;
  height:calc(.6rem * 2 + 1.1em);/* match select height */
}
.checkbox-label input[type="checkbox"]{
  width:16px;height:16px;accent-color:#7c3aed;cursor:pointer;
}

.btn{
  width:100%;padding:.7rem;border:none;border-radius:8px;
  font-size:.9rem;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;
  transition:opacity .2s;letter-spacing:.02em;
}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── loader ── */
.loader{display:flex;justify-content:center;padding:2rem 0}
.spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(124,58,237,.15);border-top-color:#7c3aed;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── result ── */
.result{
  margin-top:1.25rem;border-radius:10px;padding:1.25rem;
  font-size:.85rem;line-height:1.7;
}
.result.ok{
  background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.15);
  color:rgba(255,255,255,.8);
}
.result.err{
  background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.15);
  color:rgba(248,113,113,.85);
}

/* ── table ── */
.result-table-wrap{margin-top:1.25rem;overflow-x:auto}
.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:rgba(255,255,255,.45);
  border-bottom:1px solid rgba(255,255,255,.08);
  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:#a78bfa;font-weight:600}
.trend-up{color:#4ade80}
.trend-down{color:#f87171}
.trend-flat{color:rgba(255,255,255,.35)}


/* ── 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:#4ade80;font-size:.72rem;font-weight:600}
.rank-down{color:#f87171;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:rgba(124,58,237,.25);color:#a78bfa;
  padding:.15rem .35rem;border-radius:4px;
}
.promoted-badge{
  font-size:.6rem;font-weight:600;letter-spacing:.04em;
  background:rgba(251,191,36,.15);color:#fbbf24;
  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:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:.75rem;
}
.detail-item .dl{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.3);margin-bottom:.25rem}
.detail-item .dv{font-size:1.1rem;font-weight:600;color:#fff}
.stat-secondary{font-size:.78rem;font-weight:400;color:rgba(255,255,255,.4)}
.detail-full{grid-column:1/-1}
.detail-desc{font-size:.82rem;font-weight:400;color:rgba(255,255,255,.5);margin-top:.35rem;line-height:1.5}
.detail-link{
  display:inline-block;margin-top:.4rem;font-size:.78rem;
  color:#a78bfa;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:rgba(255,255,255,.55);font-size:.78rem;white-space:nowrap}
.bar-track{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#7c3aed,#a78bfa);transition:width .4s ease}
.bar-val{min-width:30px;text-align:right;font-size:.75rem;color:rgba(255,255,255,.4);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:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);
  color:#a78bfa;font-size:.78rem;font-weight:600;
  text-decoration:none;transition:all .2s;
}
.related-tag:hover{background:rgba(124,58,237,.2);border-color:rgba(124,58,237,.4)}

/* ── 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:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);transition:border-color .2s;
}
.video-thumb:hover{border-color:rgba(124,58,237,.4)}
.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:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  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}