/* Shared look of our pages (/home, /stats, /stats/data, /stats/panel): Label Studio 1.23.2's own design tokens and top bar,
   so these pages and Label Studio read as one product. Values copied from Label Studio's web/dist/apps/labelstudio/main.css
   (:root and [data-color-scheme=dark], var() chains resolved). The theme follows Label Studio's own switch: the
   localStorage key "preferred-color-scheme" (Light / Dark / Auto) sets data-color-scheme on <html> (hub.js, inline). */

@font-face { font-family: "Figtree"; src: url("/static/fonts/Figtree-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fonts/Figtree-SemiBold.ttf") format("truetype"); font-weight: 500 700; font-display: swap; }

:root {
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: monaco, monospace;
  --header-height: 48px;
  --radius-s: 4px; --radius-m: 8px; --radius-l: 12px;

  --color-neutral-background: #fdfdfc; --color-neutral-surface: #f9f8f6; --color-neutral-surface-active: #f0efeb;
  --color-neutral-surface-inset: #f0efeb; --color-neutral-emphasis: #f0efeb; --color-neutral-emphasis-subtle: #f9f8f6;
  --color-neutral-border: #e1ded5; --color-neutral-border-subtler: #f0efeb; --color-neutral-border-bold: #cac5b8;
  --color-neutral-content: #262522; --color-neutral-content-subtle: #45433e; --color-neutral-content-subtler: #6b6860;
  --color-neutral-content-subtlest: #a49f95; --color-neutral-icon: #45433e;
  --color-primary-background: #f0f3fe; --color-primary-surface: #4c5fa9; --color-primary-surface-hover: #576cc1;
  --color-primary-surface-active: #37447a; --color-primary-surface-content: #f0f3fe; --color-primary-border-subtle: #617ada;
  --color-primary-content: #4c5fa9; --color-primary-content-hover: #6d87f1; --color-primary-emphasis: #d4dbfb;
  --color-primary-emphasis-subtle: #f0f3fe;
  --color-negative-background: #fff1ee; --color-negative-surface: #cc5e46; --color-negative-surface-hover: #e6694e;
  --color-negative-content: #b3523d; --color-negative-border-subtler: #ff9f89; --color-negative-emphasis: #ffd6cd;
  --color-positive-background: #f4f9f9; --color-positive-surface: #287a72; --color-positive-content: #22625d;
  --color-positive-border-subtler: #7acec1; --color-positive-emphasis: #d4f1eb;
  --color-warning-background: #fff6ef; --color-warning-surface: #cc854f; --color-warning-content: #b37445;
  --color-warning-border-subtler: #ffb882; --color-warning-emphasis: #ffe4d0;
  --shadow: 0 1px 2px rgba(38, 37, 34, .06), 0 2px 8px rgba(38, 37, 34, .04);
  --shadow-pop: 0 4px 16px rgba(38, 37, 34, .14);
  /* the session-review labels (session_config.xml) */
  --label-accept: #2f9e44; --label-reject: #e03131; --label-nd: #9e9e9e;
  color-scheme: light;
}
:root[data-color-scheme="dark"] {
  --color-neutral-background: #262522; --color-neutral-surface: #1e1d1a; --color-neutral-surface-active: #12110d;
  --color-neutral-surface-inset: #0d0c09; --color-neutral-emphasis: #12110d; --color-neutral-emphasis-subtle: #1e1d1a;
  --color-neutral-border: #45433e; --color-neutral-border-subtler: #1e1d1a; --color-neutral-border-bold: #6b6860;
  --color-neutral-content: #f9f8f6; --color-neutral-content-subtle: #cac5b8; --color-neutral-content-subtler: #a49f95;
  --color-neutral-content-subtlest: #6b6860; --color-neutral-icon: #f9f8f6;
  --color-primary-background: #111626; --color-primary-surface: #576cc1; --color-primary-surface-hover: #617ada;
  --color-primary-surface-active: #4c5fa9; --color-primary-surface-content: #f0f3fe; --color-primary-border-subtle: #4c5fa9;
  --color-primary-content: #6d87f1; --color-primary-content-hover: #99abf5; --color-primary-emphasis: #37447a;
  --color-primary-emphasis-subtle: #2b3660;
  --color-negative-background: #26120d; --color-negative-surface: #cc5e46; --color-negative-surface-hover: #e6694e;
  --color-negative-content: #ff7557; --color-negative-border-subtler: #994634; --color-negative-emphasis: #994634;
  --color-positive-background: #122625; --color-positive-surface: #287a72; --color-positive-content: #57b7ab;
  --color-positive-border-subtler: #204f4d; --color-positive-emphasis: #204f4d;
  --color-warning-background: #331c14; --color-warning-surface: #cc854f; --color-warning-content: #ffa663;
  --color-warning-border-subtler: #99643a; --color-warning-emphasis: #99643a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 4px 16px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

html, body { margin: 0; }
body { background: var(--color-neutral-background); color: var(--color-neutral-content); font-family: var(--font-sans);
  font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
a { color: var(--color-primary-content); text-decoration: none; }
a:hover { color: var(--color-primary-content-hover); }

/* ---------------------------------------------------------------- top bar (Label Studio's .lsf-menu-header) */
.hub-header { position: sticky; top: 0; z-index: 1000; display: flex; height: var(--header-height);
  background: var(--color-neutral-background); border-bottom: 1px solid var(--color-neutral-border); box-sizing: border-box;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--color-neutral-content); }
.hub-header * { box-sizing: border-box; }
/* the /stats pages style bare header, button and h1 elements: keep the bar immune */
.hub-header { align-items: stretch; gap: 0; flex-wrap: nowrap; margin: 0; padding: 0; }
.hub-header button { font-family: var(--font-sans); line-height: 20px; }
.hub-header button.hub-userpic:hover { border-color: rgba(18, 17, 13, .25); }
.hub-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 240px; max-width: 240px;
  padding: 0 20px; border: 0; border-right: 1px solid var(--color-neutral-border); background: none; color: inherit;
  cursor: pointer; font: inherit; transition: background-color .15s ease-out; }
.hub-trigger:hover, .hub-trigger[aria-expanded="true"] { background: var(--color-neutral-emphasis-subtle); }
.hub-logo { display: block; width: 142px; height: 22px; color: var(--color-neutral-content); }
.hub-wordmark { display: flex; align-items: center; gap: 8px; width: auto; height: 24px; font-size: 18px; line-height: 1; white-space: nowrap; }
.hub-wordmark b { font-weight: 700; letter-spacing: -.01em; }
.hub-wordmark .hub-wm-sub { font-weight: 400; color: var(--color-neutral-content-subtler); }
.hub-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px;
  background: var(--color-primary-surface); color: var(--color-primary-surface-content); font-weight: 700; font-size: 16px; padding-bottom: 2px; box-sizing: border-box; }
.hub-burger { width: 20px; height: 20px; color: var(--color-neutral-content-subtler); flex: none; }
.hub-context { flex: 1; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 0 0 18px; }
.hub-crumbs { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 22px; }
.hub-crumbs li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-crumbs li + li::before { content: "/"; color: var(--color-neutral-content-subtlest); font-size: 18px; padding: 0 10px; }
.hub-crumbs a { color: var(--color-neutral-content-subtler); }
.hub-crumbs a:hover { color: var(--color-primary-content-hover); }
.hub-right { display: flex; align-items: center; gap: 8px; padding-right: 16px; height: 100%; }
.hub-theme { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 4px 10px 4px 6px; border-radius: 24px;
  border: 1px solid transparent; background: none; color: var(--color-neutral-content); font: inherit; font-size: 14px; cursor: pointer; }
.hub-theme:hover { background: var(--color-neutral-emphasis-subtle); border-color: var(--color-neutral-border); }
.hub-theme svg { width: 18px; height: 18px; color: var(--color-warning-surface); }
.hub-user { position: relative; }
.hub-userpic { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(18, 17, 13, .1); background: #d0d9ac;
  color: #000; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; letter-spacing: .02em;
  cursor: pointer; padding: 0; font-family: inherit; text-transform: uppercase; }
.hub-pop { position: absolute; top: calc(100% + 6px); background: var(--color-neutral-background); border: 1px solid var(--color-neutral-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-pop); padding: 8px; z-index: 1001; }
.hub-pop[hidden] { display: none; }
.hub-userpop { right: 0; min-width: 240px; }
.hub-userpop .who { padding: 6px 10px 10px; border-bottom: 1px solid var(--color-neutral-border); margin-bottom: 6px; }
.hub-userpop .who b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hub-userpop .who span { color: var(--color-neutral-content-subtler); font-size: 13px; }
.hub-menu { left: 8px; top: calc(var(--header-height) - 2px); width: 264px; position: absolute; }
.hub-menu .grp { padding: 10px 13px 4px; font-size: 12px; color: var(--color-neutral-content-subtlest); text-transform: uppercase;
  letter-spacing: .04em; }
.hub-item { display: flex; align-items: center; height: 40px; padding: 0 13px; border-radius: var(--radius-s);
  color: var(--color-neutral-content-subtler); font-size: 16px; white-space: nowrap; text-decoration: none; }
.hub-item:hover { background: var(--color-primary-emphasis-subtle); color: var(--color-neutral-content); }
.hub-item.active { background: var(--color-neutral-emphasis); color: var(--color-neutral-content); font-weight: 500; }
.hub-item.danger { color: var(--color-negative-content); }
.hub-item .ext { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--color-neutral-content-subtlest); }
@media (max-width: 640px) {
  .hub-trigger { min-width: 0; max-width: none; padding: 0 12px; gap: 8px; }
  .hub-logo { width: 110px; height: 17px; }
  .hub-wordmark { width: auto; height: 22px; font-size: 16px; gap: 6px; }
  .hub-wordmark .hub-wm-sub { display: none; }
  .hub-context { padding-left: 10px; }
  .hub-crumbs { font-size: 15px; }
  .hub-crumbs li:not(:last-child) { display: none; }
  .hub-crumbs li + li::before { display: none; }
  .hub-theme .hub-theme-lbl { display: none; }
  .hub-right { padding-right: 10px; gap: 4px; }
  .hub-menu { left: 0; right: 0; width: auto; border-radius: 0 0 var(--radius-m) var(--radius-m); }
}

/* ---------------------------------------------------------------- page body (our /home pages) */
.hub-main { max-width: 1040px; margin: 0 auto; padding: 32px 24px 64px; }
.hub-main.wide { max-width: 1400px; }
.hub-title { font-size: 24px; line-height: 32px; font-weight: 500; margin: 0 0 4px; }
.hub-sub { color: var(--color-neutral-content-subtler); margin: 0 0 24px; font-size: 15px; line-height: 22px; }
h2.hub-h2 { font-size: 18px; line-height: 26px; font-weight: 500; margin: 32px 0 12px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.hub-card { background: var(--color-neutral-background); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-m);
  padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: var(--shadow); }
.hub-card.span2 { grid-column: span 2; }
.hub-card h3 { font-size: 16px; line-height: 22px; font-weight: 500; margin: 0; display: flex; align-items: center; gap: 8px; }
.hub-card p { margin: 0; color: var(--color-neutral-content-subtle); }
.hub-card .muted, .muted { color: var(--color-neutral-content-subtler); }
.hub-card .actions { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
a.hub-card { color: inherit; transition: border-color .15s ease-out, background-color .15s ease-out; }
a.hub-card:hover { border-color: var(--color-primary-border-subtle); background: var(--color-primary-emphasis-subtle); color: inherit; }
a.hub-card .go { color: var(--color-primary-content); margin-top: auto; padding-top: 6px; font-weight: 500; }
@media (max-width: 640px) { .hub-main { padding: 20px 16px 48px; } .hub-card.span2 { grid-column: auto; } .hub-title { font-size: 20px; line-height: 28px; } }

.hub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px;
  border-radius: var(--radius-s); border: 1px solid var(--color-primary-surface); background: var(--color-primary-surface);
  color: var(--color-primary-surface-content); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: all .15s ease-out; }
.hub-btn:hover { background: var(--color-primary-surface-hover); border-color: var(--color-primary-surface-hover);
  color: var(--color-primary-surface-content); }
.hub-btn.small { height: 32px; font-size: 14px; padding: 0 12px; }
.hub-btn.secondary { background: var(--color-neutral-background); border-color: var(--color-neutral-border-bold);
  color: var(--color-neutral-content); }
.hub-btn.secondary:hover { background: var(--color-neutral-emphasis-subtle); color: var(--color-neutral-content); }
.hub-btn.danger { background: var(--color-negative-surface); border-color: var(--color-negative-surface); }
.hub-btn[disabled] { opacity: .5; cursor: default; }

.hub-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px;
  font-weight: 500; white-space: nowrap; background: var(--color-neutral-emphasis); color: var(--color-neutral-content-subtle); }
.hub-badge.ok { background: var(--color-positive-emphasis); color: var(--color-positive-content); }
.hub-badge.bad { background: var(--color-negative-emphasis); color: var(--color-negative-content); }
.hub-badge.warn { background: var(--color-warning-emphasis); color: var(--color-warning-content); }
.hub-badge.info { background: var(--color-primary-emphasis); color: var(--color-primary-content); }

.hub-note { border-radius: var(--radius-m); padding: 12px 16px; background: var(--color-primary-background);
  border: 1px solid var(--color-primary-emphasis); color: var(--color-neutral-content-subtle); margin: 0 0 16px; }
.hub-note.warn { background: var(--color-warning-background); border-color: var(--color-warning-border-subtler); }
.hub-note.bad { background: var(--color-negative-background); border-color: var(--color-negative-border-subtler); }
.hub-note.ok { background: var(--color-positive-background); border-color: var(--color-positive-border-subtler); }

.hub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0; }
.hub-stats.four { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.hub-stack { display: flex; flex-direction: column; gap: 12px; }
.hub-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.hub-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-grid.two { grid-template-columns: 2fr 1fr; }
@media (max-width: 760px) { .hub-grid.two { grid-template-columns: 1fr; } .hub-row { flex-direction: column; align-items: stretch; } }
.hub-stat .v { font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hub-stat .k { font-size: 13px; color: var(--color-neutral-content-subtler); }

.hub-tablewrap { overflow-x: auto; border: 1px solid var(--color-neutral-border); border-radius: var(--radius-m);
  background: var(--color-neutral-background); }
table.hub-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 720px; }
.hub-table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--color-neutral-content-subtler);
  background: var(--color-neutral-surface); padding: 10px 12px; border-bottom: 1px solid var(--color-neutral-border); white-space: nowrap; }
.hub-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-neutral-border-subtler); vertical-align: middle; }
.hub-table tr:last-child td { border-bottom: 0; }
.hub-table tbody tr:hover td { background: var(--color-neutral-emphasis-subtle); }
.hub-table .nw { white-space: nowrap; }
.hub-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-table .wrong td { background: var(--color-negative-background); }
.hub-empty { padding: 32px 16px; text-align: center; color: var(--color-neutral-content-subtler); }

.hub-input, .hub-select { height: 32px; border: 1px solid var(--color-neutral-border-bold); border-radius: var(--radius-s);
  background: var(--color-neutral-background); color: var(--color-neutral-content); font: inherit; padding: 0 8px; min-width: 0; }
.hub-input:focus, .hub-select:focus { outline: 2px solid var(--color-primary-border-subtle); outline-offset: -1px; }

.hub-prose { max-width: 760px; font-size: 15px; line-height: 24px; color: var(--color-neutral-content-subtle); }
.hub-prose h2 { font-size: 18px; line-height: 26px; font-weight: 500; color: var(--color-neutral-content); margin: 32px 0 8px; }
.hub-prose ul, .hub-prose ol { padding-left: 22px; margin: 8px 0; }
.hub-prose li { margin: 4px 0; }
.hub-prose b { color: var(--color-neutral-content); font-weight: 500; }
.hub-prose kbd { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border: 1px solid var(--color-neutral-border-bold);
  border-bottom-width: 2px; border-radius: 4px; background: var(--color-neutral-surface); color: var(--color-neutral-content); }
.hub-prose dl { margin: 8px 0; }
.hub-prose dt { font-weight: 500; color: var(--color-neutral-content); margin-top: 12px; }
.hub-prose dd { margin: 2px 0 0; }
.hub-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: 0; margin-right: 4px; }
.sw.accept { background: var(--label-accept); } .sw.reject { background: var(--label-reject); } .sw.nd { background: var(--label-nd); }

/* ---------------------------------------------------------------- top bar: logo = home link, burger = menu */
.hub-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 240px; max-width: 240px;
  padding: 0 10px 0 20px; border-right: 1px solid var(--color-neutral-border); }
.hub-home { display: flex; align-items: center; height: 100%; color: var(--color-neutral-content); }
.hub-home:hover { color: var(--color-neutral-content); opacity: .8; }
.hub-brand .hub-trigger { min-width: 0; max-width: none; width: 36px; height: 36px; padding: 0; justify-content: center;
  border: 0; border-radius: var(--radius-s); }
@media (max-width: 640px) { .hub-brand { min-width: 0; max-width: none; padding: 0 4px 0 12px; } }

/* ---------------------------------------------------------------- page head, filters, KPI tiles (dashboards) */
.hub-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  margin: 0 0 20px; }
.hub-pagehead .hub-sub { margin: 0; }
.hub-asof { color: var(--color-neutral-content-subtler); font-size: 13px; line-height: 18px; }
.hub-asof .live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-positive-surface);
  margin-right: 6px; vertical-align: 0; }
.hub-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; padding: 12px 16px; margin: 0 0 20px;
  background: var(--color-neutral-surface); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-m); }
.hub-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-field > .lbl { font-size: 12px; line-height: 16px; color: var(--color-neutral-content-subtler); font-weight: 500; }
.hub-seg { display: inline-flex; border: 1px solid var(--color-neutral-border-bold); border-radius: var(--radius-s); overflow: hidden;
  background: var(--color-neutral-background); max-width: 100%; }
.hub-seg button { font: inherit; font-size: 14px; height: 32px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  color: var(--color-neutral-content-subtle); white-space: nowrap; }
.hub-seg button + button { border-left: 1px solid var(--color-neutral-border); }
.hub-seg button:hover { background: var(--color-neutral-emphasis-subtle); }
.hub-seg button[aria-pressed="true"] { background: var(--color-primary-emphasis); color: var(--color-primary-content); font-weight: 500; }
.hub-dd { position: relative; }
.hub-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border: 1px solid var(--color-neutral-border-bold); border-radius: var(--radius-s); background: var(--color-neutral-background);
  cursor: pointer; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.hub-dd > summary::-webkit-details-marker { display: none; }
.hub-dd > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px;
  color: var(--color-neutral-content-subtler); }
.hub-ddpop { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 300px; max-width: min(420px, 90vw);
  background: var(--color-neutral-background); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.hub-ddpop label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-s); cursor: pointer; }
.hub-ddpop label:hover { background: var(--color-neutral-emphasis-subtle); }
.hub-ddpop .row { display: flex; gap: 6px; padding: 4px 4px 8px; border-bottom: 1px solid var(--color-neutral-border); margin-bottom: 4px; }

.hub-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 28px; }
.hub-kpi { background: var(--color-neutral-background); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-m);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; box-shadow: var(--shadow); }
.hub-kpi .k { font-size: 13px; line-height: 18px; color: var(--color-neutral-content-subtler); }
.hub-kpi .v { font-size: 28px; line-height: 36px; font-weight: 500; color: var(--color-neutral-content); }
.hub-kpi .v small { font-size: 15px; font-weight: 400; color: var(--color-neutral-content-subtler); margin-left: 4px; }
.hub-kpi .s { font-size: 13px; line-height: 18px; color: var(--color-neutral-content-subtle); }
.hub-kpi.alert { border-color: var(--color-warning-border-subtler); background: var(--color-warning-background); }
.hub-kpi.bad { border-color: var(--color-negative-border-subtler); background: var(--color-negative-background); }
@media (max-width: 640px) { .hub-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .hub-kpi { padding: 10px 12px; }
  .hub-kpi .v { font-size: 22px; line-height: 28px; } .hub-filterbar { padding: 12px; gap: 12px; }
  .hub-seg { overflow-x: auto; } .hub-seg button { padding: 0 8px; font-size: 13px; } }

.hub-section { margin: 0 0 32px; }
.hub-section > .head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  margin: 0 0 10px; }
.hub-section > .head h2 { font-size: 18px; line-height: 26px; font-weight: 500; margin: 0; }
.hub-section > .head .hint { color: var(--color-neutral-content-subtler); font-size: 13px; }

/* sortable tables */
.hub-table th.sort { cursor: pointer; user-select: none; }
.hub-table th.sort:hover { color: var(--color-neutral-content); }
.hub-table th.sort::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .25; }
.hub-table th.sort[aria-sort="descending"]::after { opacity: 1; }
.hub-table th.sort[aria-sort="ascending"]::after { border-top: 0; border-bottom: 4px solid currentColor; opacity: 1; }
.hub-table tr.click { cursor: pointer; }
.hub-table tr.click:focus-visible td { outline: 2px solid var(--color-primary-border-subtle); outline-offset: -2px; }
.hub-table .sub { color: var(--color-neutral-content-subtler); font-size: 12px; line-height: 16px; }
.hub-table .zero { color: var(--color-neutral-content-subtlest); }

/* inline meters: a track in the same ramp, a fill, optional ticks (limit, team median) */
.hub-meter { position: relative; height: 6px; border-radius: 3px; background: var(--color-primary-emphasis); width: 72px;
  margin-top: 5px; }
.hub-meter > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--color-primary-surface); }
.hub-meter.bad > i { background: var(--color-negative-surface); }
.hub-meter > b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--color-neutral-content-subtle); }
.hub-meter > b.limit { background: var(--color-negative-content); }
.num .hub-meter { margin-left: auto; }

/* flags: status colour + icon + words, never colour alone */
.hub-flag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 5px; border-radius: 11px; font-size: 12px;
  font-weight: 500; white-space: nowrap; background: var(--color-warning-emphasis); color: var(--color-warning-content); }
.hub-flag::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-warning-content); color: var(--color-neutral-background); font-size: 10px;
  font-weight: 700; line-height: 1; }
.hub-flag.bad { background: var(--color-negative-emphasis); color: var(--color-negative-content); }
.hub-flag.bad::before { background: var(--color-negative-content); }
.hub-flags { display: flex; flex-wrap: wrap; gap: 4px; }

/* drawer (detail view) */
.hub-drawer-bg { position: fixed; inset: 0; background: rgba(18, 17, 13, .35); z-index: 1100; }
.hub-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(700px, 100vw); z-index: 1101; overflow-y: auto;
  background: var(--color-neutral-background); border-left: 1px solid var(--color-neutral-border); box-shadow: var(--shadow-pop);
  padding: 0 0 48px; box-sizing: border-box; }
.hub-drawer[hidden], .hub-drawer-bg[hidden] { display: none; }
.hub-drawer .dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 20px 12px; background: var(--color-neutral-background); border-bottom: 1px solid var(--color-neutral-border); }
.hub-drawer .dhead h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.hub-drawer .dbody { padding: 16px 20px; display: flex; flex-direction: column; gap: 24px; }
.hub-drawer h3 { margin: 0 0 8px; font-size: 15px; line-height: 22px; font-weight: 500; }
.hub-x { width: 32px; height: 32px; border-radius: var(--radius-s); border: 1px solid var(--color-neutral-border-bold); background: none;
  color: var(--color-neutral-content); font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
.hub-x:hover { background: var(--color-neutral-emphasis-subtle); }
@media (max-width: 640px) { .hub-drawer .dhead, .hub-drawer .dbody { padding-left: 16px; padding-right: 16px; } }

/* charts (inline SVG): hairline axes, thin columns, a tooltip on every mark */
.hub-chart { position: relative; width: 100%; }
.hub-chart svg { display: block; width: 100%; overflow: visible; }
.hub-chart .grid { stroke: var(--color-neutral-border-subtler); stroke-width: 1; }
.hub-chart .base { stroke: var(--color-neutral-border-bold); stroke-width: 1; }
.hub-chart .tick { fill: var(--color-neutral-content-subtler); font-size: 11px; font-family: var(--font-sans); }
.hub-chart .col { fill: var(--color-primary-surface); }
.hub-chart .col.hi { fill: var(--color-primary-content-hover); }
.hub-chart .hit { fill: transparent; }
.hub-tip { position: absolute; z-index: 20; pointer-events: none; background: var(--color-neutral-background);
  border: 1px solid var(--color-neutral-border); border-radius: var(--radius-s); box-shadow: var(--shadow-pop); padding: 6px 10px;
  font-size: 12px; line-height: 17px; white-space: nowrap; color: var(--color-neutral-content); }
.hub-tip b { font-weight: 500; }
.hub-tip[hidden] { display: none; }

/* collapsible sections, definitions, live numbers on cards */
details.hub-more { border: 1px solid var(--color-neutral-border); border-radius: var(--radius-m); background: var(--color-neutral-background);
  margin: 0 0 16px; }
details.hub-more > summary { cursor: pointer; padding: 12px 16px; font-weight: 500; }
details.hub-more[open] > summary { border-bottom: 1px solid var(--color-neutral-border); }
details.hub-more > .in { padding: 12px 16px; }
details.hub-more > .hub-tablewrap { border: 0; border-radius: 0 0 var(--radius-m) var(--radius-m); }
.hub-defs { margin: 0; padding-left: 18px; color: var(--color-neutral-content-subtle); font-size: 14px; line-height: 21px; }
.hub-defs li { margin: 4px 0; }
.hub-defs b { color: var(--color-neutral-content); font-weight: 500; }
.hub-card .live { font-size: 22px; line-height: 28px; font-weight: 500; color: var(--color-neutral-content); }
.hub-card .live small { font-size: 14px; font-weight: 400; color: var(--color-neutral-content-subtler); }
.hub-card .q { font-size: 13px; line-height: 18px; color: var(--color-neutral-content-subtler); }

/* ---------------------------------------------------------------- "Your results" card (reviewer / candidate home) */
.hub-results .hub-res + .hub-res { border-top: 1px solid var(--color-neutral-border); margin-top: 14px; padding-top: 14px; }
.hub-res .lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 8px;
  color: var(--color-neutral-content); }
.hub-res .lbl .when { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--color-neutral-content-subtler); }
.hub-res .hub-stat .k span { white-space: nowrap; }
.hub-res > p.muted { margin-top: 8px; font-size: 13px; }
.hub-reslist { margin: 0; padding-left: 18px; color: var(--color-neutral-content-subtle); }
.hub-reslist li { margin: 4px 0; }
.hub-reslist b { color: var(--color-neutral-content); font-weight: 500; }
@media (max-width: 640px) { .hub-res .hub-stat .v { font-size: 18px; line-height: 24px; } }
/* the candidate's exam sessions: submitted (check), the next one (link), the rest */
.hub-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hub-steps li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--color-neutral-content-subtle); }
.hub-steps li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--color-neutral-border-bold); }
.hub-steps li.done::before { content: "\2713"; border: 0; background: var(--color-positive-surface);
  color: var(--color-positive-surface-content, #fff); font-size: 12px; line-height: 18px; text-align: center; font-weight: 700; }
.hub-steps li.next::before { border-color: var(--color-primary-surface); }
.hub-steps b { font-weight: 500; color: var(--color-neutral-content); }

/* ---------------------------------------------------------------- guideline examples: one still + one sentence */
.hub-ex { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 4px; padding: 8px; max-width: 640px;
  border: 1px solid var(--color-neutral-border); border-radius: var(--radius-m);
  background: var(--color-neutral-background); }
.hub-ex img { width: 176px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex: none;
  background: var(--color-neutral-surface); }
.hub-ex figcaption { font-size: 14px; line-height: 20px; color: var(--color-neutral-content-subtle); }
.hub-ex .tag { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-neutral-content-subtler);
  border: 1px solid var(--color-neutral-border); margin-right: 2px; }
.hub-ex a { white-space: nowrap; }
@media (max-width: 520px) { .hub-ex { gap: 10px; } .hub-ex img { width: 120px; } .hub-ex figcaption { font-size: 13px; line-height: 18px; } }

/* ---------------------------------------------------------------- gold examples: short clips, Accept / Reject + why */
.hub-gold-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 8px 0 4px; }
.hub-gold-card { margin: 0; padding: 12px; gap: 10px; }
.hub-gold-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px;
  background: var(--color-neutral-surface); }
.hub-gold-card figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px;
  color: var(--color-neutral-content-subtle); }
.hub-gold-card figcaption p { margin: 0; }
.hub-gold-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.hub-gold-tags .hub-badge { white-space: normal; height: auto; min-height: 22px; padding: 2px 8px; line-height: 16px; }
.hub-gold-card a { white-space: nowrap; }

/* ---------------------------------------------------------------- browser advice (HEVC videos), invite link */
.hub-hint { margin: -12px 0 20px; font-size: 14px; line-height: 20px; color: var(--color-neutral-content-subtler); }
.hub-hint b { font-weight: 500; color: var(--color-neutral-content-subtle); }
.hub-note.hub-bwarn { color: var(--color-neutral-content); }
.hub-note.hub-bwarn > b { font-weight: 600; }
.hub-note.hub-bwarn p { margin: 4px 0 0; color: var(--color-neutral-content-subtle); }
.hub-note.hub-bwarn p b { font-weight: 500; color: var(--color-neutral-content); }
/* the home page's connection line: "Test my connection" looks like a link */
.hub-linkbtn { font: inherit; padding: 0; border: 0; background: none; color: var(--color-primary-content); cursor: pointer; }
.hub-linkbtn:hover { color: var(--color-primary-content-hover); }
.hub-linkbtn[disabled] { color: var(--color-neutral-content-subtlest); cursor: default; }
.hub-invite { max-width: 880px; margin: 0 0 8px; }
.hub-copy { display: flex; gap: 8px; align-items: center; }
.hub-copy .hub-input { flex: 1; min-width: 0; }
.hub-copied { font-size: 13px; color: var(--color-positive-content); max-width: 220px; }
.hub-copied:empty { display: none; }
.hub-mono { font-family: var(--font-mono); font-size: 13px; }
.hub-invite details.hub-more > .in > p { margin: 0; }
.hub-invite table.hub-table { min-width: 0; }
@media (max-width: 520px) { .hub-copy { flex-direction: column; align-items: stretch; } }

/* ---------------------------------------------------------------- admin home backup line, platform settings */
.hub-backup { margin: 24px 0 0; font-size: 13px; color: var(--color-neutral-content-subtler); }
/* a still of the watermark over a dark frame (the real one is drawn over the video by the Label Studio patch) */
.hub-wmprev { position: relative; height: 96px; border-radius: var(--radius-m); overflow: hidden;
  background: linear-gradient(135deg, #3a3f37 0%, #6f6a5c 45%, #b9b2a0 100%); }
.hub-wmprev-label { position: absolute; left: 18%; top: 38%; display: flex; align-items: center; gap: 8px; font-size: 13px;
  line-height: 1; white-space: nowrap; color: rgba(255, 255, 255, .5); text-shadow: 0 0 2px rgba(0, 0, 0, .5); }
.hub-wmprev-label .m { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 4px; border: 1.5px solid currentColor; font-weight: 700; font-size: 11px; box-sizing: border-box; }
.hub-wmprev-label b { font-weight: 700; }
@media (max-width: 640px) { .hub-wmprev-label { left: 6%; font-size: 11px; gap: 6px; } }