/* /admin: the dashboard for admins. Every class is hq-*, since this file loads on every page.
   Not ad-*: ad blockers hide anything named like an ad unit. */

@property --hq-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes hq-spin { to { --hq-a: 360deg; } }
@keyframes hq-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes hq-fill { from { transform: scaleX(0) } }
@keyframes hq-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-24deg) } 4% { opacity: 1 } 14%, 100% { opacity: 0; transform: translate(-520px, 230px) rotate(-24deg) } }

.hq { --hq-rim: conic-gradient(from var(--hq-a), #8b5cf6, #ff4fa3, #ffb547, #3ee6d6, #1d9bf0, #8b5cf6); --hq-green: #3ee68a; --hq-red: #ff5c6c;
      padding: 28px 0 40px; }

/* Tabs */
/* Sticks just under the 60px app header. */
.hq-tabs { position: sticky; top: 70px; z-index: 5; display: flex; gap: 2px; padding: 4px; margin: 0 0 22px; width: max-content; max-width: 100%;
           overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(7, 7, 13, .82); backdrop-filter: blur(14px);
           box-shadow: var(--cc-plate-edge); }
.hq-tabs::-webkit-scrollbar { display: none; }
.hq-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font-size: 14px;
          color: var(--cc-text-muted); white-space: nowrap; cursor: pointer; transition: color .2s; }
.hq-tab:hover { color: var(--cc-text); }
.hq-tab[aria-selected="true"] { color: var(--cc-text); background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.hq-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 1.5px; border-radius: 2px; background: var(--cc-tag-singular); }
.hq-tab span { font-family: var(--cc-font-mono); font-size: 10px; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--cc-text-muted); }
.hq-tab span.is-warn { background: rgba(255, 92, 108, .14); color: var(--hq-red); }

/* Layout */
.hq-panel { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.hq-panel[hidden] { display: none; }
.hq-panel > * { grid-column: span 12; animation: hq-rise .7s var(--cc-ease-out) both; }
@media (min-width: 900px) {
  .hq-s3 { grid-column: span 3; } .hq-s4 { grid-column: span 4; } .hq-s5 { grid-column: span 5; }
  .hq-s6 { grid-column: span 6; } .hq-s7 { grid-column: span 7; } .hq-s8 { grid-column: span 8; }
}
@media (min-width: 560px) and (max-width: 899px) { .hq-s3 { grid-column: span 6; } }

.hq-h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.02; letter-spacing: -.045em; font-weight: 650; margin: 4px 0 8px; }
.hq-h1 em { font-style: normal; background: var(--cc-tag-singular); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hq-lede { color: var(--cc-text-muted); font-size: 15px; margin: 0 0 18px; max-width: 620px; }

.hq-plate { position: relative; overflow: hidden; padding: 20px; border-radius: 20px; background: var(--cc-plate); box-shadow: var(--cc-plate-edge); }
.hq-label { display: flex; align-items: center; gap: 8px; font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text-muted); }
.hq-label small { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--cc-text-dim); }
.hq-big { margin: 10px 0 4px; font-size: 40px; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hq-sub { font-size: 13px; color: var(--cc-text-muted); }
.hq-sub b { color: var(--cc-text); font-weight: 600; }
.hq-up, .hq-down { font-family: var(--cc-font-mono); font-size: 12px; }
.hq-up { color: var(--hq-green); } .hq-down { color: var(--hq-red); }
.hq-h2 { margin: 6px 0 16px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.hq-mono { font-family: var(--cc-font-mono); font-variant-numeric: tabular-nums; }
.hq-empty { margin: 14px 0 0; font-size: 13px; color: var(--cc-text-muted); }

/* Rarity: the tag gradient as text, the rim as a mini card */
.hq-tag { font-family: var(--cc-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; white-space: nowrap;
          background: var(--tag); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hq-mini { flex: none; width: 26px; height: 38px; padding: 1.5px; border-radius: 6px; background: var(--rim); }
.hq-mini::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 5px; background: radial-gradient(circle at 50% 40%, #1a1440, #05050a 75%); }

/* Hero */
.hq-hero { padding: 1.5px; border-radius: 22px; background: var(--hq-rim); animation: hq-spin 8s linear infinite, hq-rise .7s var(--cc-ease-out) both; }
.hq-hero-in { position: relative; overflow: hidden; height: 100%; padding: 26px; border-radius: 20.5px;
              background: radial-gradient(120% 140% at 85% 0%, #1b0f3a 0%, #07070d 55%), #07070d; }
.hq-hero-in::after { content: ""; position: absolute; inset: 0; background: var(--cc-foil); opacity: .06; mix-blend-mode: screen; pointer-events: none; }
.hq-shoot { position: absolute; top: 20%; right: -10%; width: 160px; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, #fff); animation: hq-shoot 5s ease-in infinite; }
.hq-num { margin: 14px 0 6px; font-size: clamp(56px, 9vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.hq-rarbar { display: flex; gap: 2px; height: 8px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: var(--cc-track); }
.hq-rarbar span { height: 100%; min-width: 4px; background: var(--tag); }
.hq-rars { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; }
.hq-rars div { display: flex; flex-direction: column; gap: 2px; }
.hq-rars b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* MRR sparkline */
.hq-spark { display: block; width: 100%; height: 60px; margin: 14px 0 10px; overflow: visible; }
.hq-spark-line { fill: none; stroke: var(--cc-magenta); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hq-spark-wash { fill: var(--cc-violet); opacity: .14; }

/* Charts: series colours for stacked_column_chart */
.hq .ch-stack { opacity: .55; }
.hq .ch-stack.is-last { opacity: 1; }
.hq .s-common { fill: #8b98a5; } .hq .s-rare { fill: #1d9bf0; } .hq .s-epic { fill: #ff4fa3; } .hq .s-singular { fill: #ffb547; }
.hq .s-signed { fill: #2f3336; opacity: 1; } .hq .s-onboarded { fill: #3ee6d6; opacity: 1; }
.hq-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: -4px 0 12px; font-size: 12px; color: var(--cc-text-muted); }
.hq-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--c); }

/* Funnel */
.hq-funnel { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.hq-step { display: grid; grid-template-columns: 96px 1fr 60px; align-items: center; gap: 12px; font-size: 13px; }
.hq-step i { height: 26px; overflow: hidden; border-radius: 8px; background: var(--cc-track); }
.hq-step i span { display: block; height: 100%; min-width: 4px; border-radius: 8px; background: var(--c); transform-origin: left; animation: hq-fill 1.2s var(--cc-ease-out) both; }
.hq-step b { text-align: right; font-weight: 500; }

/* Tiers */
.hq-tiers { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.hq-tier-h { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 13px; }
.hq-tier-h b { font-weight: 600; }
.hq-seats { display: flex; flex-wrap: wrap; gap: 3px; }
.hq-seats i { width: 8px; height: 8px; border-radius: 2px; background: var(--cc-track); }
.hq-seats i.is-on { background: var(--c); box-shadow: 0 0 6px var(--c); }

/* Lists */
.hq-feed { display: flex; flex-direction: column; margin: 10px 0 0; padding: 0; list-style: none; }
.hq-feed li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cc-divider); font-size: 13px; }
.hq-feed li:last-child { border-bottom: 0; }
.hq-feed .hq-who { flex: 1; min-width: 0; }
.hq-feed .hq-who div { overflow: hidden; font-size: 12px; color: var(--cc-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.hq-feed time { font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-dim); white-space: nowrap; }
.hq-lb { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: hq-lb; }
.hq-lb li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; }
.hq-lb.is-ranked li { counter-increment: hq-lb; }
.hq-lb.is-ranked li::before { content: counter(hq-lb); width: 16px; font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-muted); }
.hq-lb.is-ranked li:first-child::before { content: "★"; color: var(--cc-amber); }
.hq-lb .hq-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-meter { width: 70px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--cc-track); }
.hq-meter span { display: block; height: 100%; background: var(--cc-tag-epic); }
.hq-quote { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.hq .ob-avatar { flex: none; border-radius: 50%; }

/* Heatmap */
.hq-heat { display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 3px; margin-top: 14px; }
.hq-heat i { aspect-ratio: 1; border-radius: 3px; background: #0d0e14; }
.hq-heat span { display: flex; align-items: center; font-family: var(--cc-font-mono); font-size: 10px; color: var(--cc-text-muted); }

/* Engine room */
.hq-health { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 560px) { .hq-health { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .hq-health { grid-template-columns: repeat(6, 1fr); } }
.hq-hc { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px var(--cc-divider); --s: var(--hq-green); }
.hq-hc.is-warn { --s: var(--cc-amber); } .hq-hc.is-bad { --s: var(--hq-red); }
.hq-hc dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cc-text-muted); }
.hq-hc dt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s); box-shadow: 0 0 8px var(--s); }
.hq-hc dd { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hq-hc dd small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--cc-text-muted); }
.hq-hc a { font-size: 12px; color: var(--cc-sky); }

/* People */
.hq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.hq-search { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--cc-divider); border-radius: 12px; outline: none;
             background: rgba(255, 255, 255, .03); color: var(--cc-text); font: inherit; font-size: 14px; }
.hq-search:focus { border-color: var(--cc-violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.hq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hq-chip { padding: 7px 12px; border-radius: 999px; font-size: 12px; color: var(--cc-text-muted); box-shadow: inset 0 0 0 1px var(--cc-divider); }
.hq-chip[aria-current] { color: var(--cc-text); background: rgba(139, 92, 246, .1); box-shadow: inset 0 0 0 1px var(--cc-violet); }
.hq-table-wrap { margin: 0 -20px; padding: 0 20px; overflow-x: auto; }
.hq-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.hq-table th { padding: 8px 10px; border-bottom: 1px solid var(--cc-divider); text-align: left; font-family: var(--cc-font-mono); font-size: 10px; font-weight: 500;
               letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text-muted); white-space: nowrap; }
.hq-table td { padding: 10px; border-bottom: 1px solid var(--cc-divider); vertical-align: middle; }
.hq-table tr:hover td { background: rgba(255, 255, 255, .015); }
.hq-u { display: flex; align-items: center; gap: 10px; }
.hq-u b { font-weight: 600; }
.hq-u div div { font-size: 12px; color: var(--cc-text-muted); }
.hq-pill { padding: 3px 8px; border-radius: 999px; font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
           color: var(--cc-amber); background: rgba(255, 181, 71, .1); }
.hq-pill.is-active { color: var(--hq-green); background: rgba(62, 230, 138, .1); }
.hq-pill.is-none { color: var(--cc-text-muted); background: rgba(255, 255, 255, .04); }
.hq-crown { font-size: 15px; cursor: pointer; filter: grayscale(1) opacity(.25); transition: filter .2s, transform .2s var(--cc-ease-out); }
.hq-crown.is-on { filter: none; }
.hq-crown:not(:disabled):hover { transform: scale(1.25); }
.hq-crown:disabled { cursor: default; }
.hq-link { font-size: 12px; color: var(--cc-text-muted); }
.hq-link:hover { color: var(--cc-text); }