/* TechFace v4: creator dashboard + admin analytics (light/dark via ui.css variables) */
.tf-an-filters { display: flex; flex-direction: column; gap: .7rem; }
.tf-an-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.tf-an-custom .tf4-field { flex: 1 1 9rem; }
.tf-an-range { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.tf-an-chart-wrap { width: 100%; }
.tf-an-chart { margin: 0; width: 100%; }
.tf-an-chart-top { display: flex; justify-content: space-between; margin-bottom: .3rem; }
.tf-an-plot { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-top: 2px;
  background: repeating-linear-gradient(to top, var(--tf-line) 0, var(--tf-line) 1px, transparent 1px, transparent 25%); border-bottom: 1px solid var(--tf-line); }
.tf-an-bar { flex: 1 1 0; min-width: 2px; height: var(--h); background: var(--tf-blue); opacity: .85; border-radius: 4px 4px 0 0; cursor: pointer; outline: none; transition: opacity .15s, background .15s; }
.tf-an-bar:hover, .tf-an-bar:focus-visible { opacity: 1; background: var(--tf-violet); }
.tf-an-axisrow { display: flex; gap: 2px; margin-top: .3rem; }
.tf-an-axisrow span { flex: 1 1 0; min-width: 0; font-size: .68rem; color: var(--tf-muted); white-space: nowrap; overflow: visible; }
.tf-an-tip { position: absolute; z-index: 90; pointer-events: none; background: #0f172a; color: #fff; font-size: .78rem; font-weight: 700;
  padding: .3rem .55rem; border-radius: 8px; box-shadow: var(--tf-shadow-lg); white-space: nowrap; }
.tf-an-rank-num { flex: none; min-width: 3.4rem; text-align: center; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em;
  color: var(--tf-blue); background: rgba(24, 119, 242, .1); border-radius: 12px; padding: .45rem .3rem; font-variant-numeric: tabular-nums; }
.tf-an-table-head { padding: 1rem 1rem 0; }
.tf-an-posts td.tf-an-post { min-width: 14rem; max-width: 26rem; }
.tf-an-sort { color: inherit; } .tf-an-sort.is-active { color: var(--tf-blue); }
.tf-an-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .8rem; border-top: 1px solid var(--tf-line); }
.tf-an-feature { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto; align-items: center; gap: .6rem; padding: .45rem 0; }
.tf-an-feature .tf4-meter { height: 10px; }
.tf-an-timeline { display: flex; flex-direction: column; }
.tf-an-day { position: sticky; top: 3.5rem; z-index: 1; background: var(--tf-card); padding: .55rem .75rem; font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tf-muted); border-bottom: 1px solid var(--tf-line); }
.tf-an-ev { display: grid; grid-template-columns: 3.4rem 1.6rem 1fr; align-items: center; gap: .5rem; padding: .45rem .75rem; border-bottom: 1px solid var(--tf-line); font-size: .88rem; }
.tf-an-ev time { font-variant-numeric: tabular-nums; color: var(--tf-muted); font-weight: 700; }
.tf-an-ev .ic { color: var(--tf-blue); display: inline-flex; }
.tf-an-users { display: flex; flex-direction: column; }
.tf-an-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .tf-an-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tf-an-kv > div { background: var(--tf-soft); border-radius: 12px; padding: .55rem .7rem; }
.tf-an-kv b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tf-an-kv span { font-size: .74rem; color: var(--tf-muted); font-weight: 700; }
.tf-an-dash-group { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tf-muted); margin: .4rem 0 -.2rem; }