/* ============================================================
   QUANTEEC DEMO — design-system skin
   Integrates the launcher + players with the new site tokens
   (Figtree, brand blues/cyan, glass, radii). Framework free.
   Loaded AFTER tokens.css so it can rely on the CSS variables,
   and AFTER the legacy demo styles so it can override them.
   ============================================================ */

/* ============================================================
   1. LAUNCHER CHROME  (body.qlauncher = demo/index.html)
   ============================================================ */
body.qlauncher{
  background:var(--surface-2);
  color:var(--fg);
  font-family:var(--font-body);
}

/* ------------------------------------------------------------
   TOP TOOLBAR (#formBarOnTop.dbar)
   Left: back + brand · Right: source loader (badge + URL + play)
   ------------------------------------------------------------ */
body.qlauncher #formBarOnTop.dbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  padding:11px clamp(14px,3vw,28px);min-height:66px;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(33,188,238,.10), transparent 55%),
    linear-gradient(180deg,#071534 0%,#050d22 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 34px -24px rgba(0,0,0,.95);
  z-index:1040;
}

/* left cluster */
.dbar__left{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.dbar__back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:#eaf0fb;
  padding:.52rem .95rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.dbar__back:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);transform:translateY(-1px);}
.dbar__back svg{width:17px;height:17px;flex:none;}
.dbar__back span{white-space:nowrap;}
.dbar__sep{width:1px;height:26px;background:rgba(255,255,255,.14);flex:none;}
.dbar__brand{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:0;}
.dbar__brand img{height:25px;width:auto;}

/* source loader */
.dbar__source{display:flex;align-items:center;gap:8px;flex:1 1 360px;max-width:660px;margin-left:auto;}
.dbar__badge{
  flex:none;display:inline-grid;place-items:center;min-width:56px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-2);background:rgba(33,188,238,.14);
  border:1px solid rgba(33,188,238,.32);border-radius:var(--r-sm);padding:.5rem .6rem;
}
.dbar__field{
  display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;height:44px;padding:0 .9rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.dbar__field:focus-within{border-color:var(--accent-2);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(33,188,238,.22);}
.dbar__field-ic{width:16px;height:16px;color:#7e8eae;flex:none;}
.dbar__input{
  flex:1 1 auto;min-width:0;min-height:44px;height:100%;border:none;background:transparent;outline:none;
  color:#eaf0fb;font-family:var(--font-mono);font-size:1rem;
}
.dbar__input::placeholder{color:#6b7a99;}
.dbar__play{
  flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;height:44px;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:#fff;
  background:var(--action-bg);border:1px solid transparent;border-radius:var(--r-pill);padding:0 1.2rem;
  box-shadow:0 12px 26px -12px rgba(17,107,248,.9);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.dbar__play:hover{background:var(--action-hover);transform:translateY(-1px);}
.dbar__play:active{transform:translateY(0);}
.dbar__play svg{width:15px;height:15px;flex:none;}

@media (max-width:760px){
  body.qlauncher #formBarOnTop.dbar{gap:10px;padding:9px 12px;min-height:0;}
  .dbar__back{min-height:38px;padding:.44rem .78rem;font-size:.8rem;}
  .dbar__brand{min-height:38px;}
  .dbar__source{flex:1 1 100%;width:100%;max-width:100%;min-width:0;margin-left:0;order:3;}
  .dbar__badge{min-width:50px;padding:.44rem .52rem;}
  .dbar__field{height:40px;padding:0 .7rem;}
  .dbar__input{min-height:40px;font-size:.82rem;}
  .dbar__play{height:40px;padding:0 .95rem;}
}
@media (max-width:480px){
  body.qlauncher #formBarOnTop.dbar{gap:10px;}
  .dbar__left{width:100%;min-width:0;gap:8px;}
  .dbar__back{padding-inline:.75rem;}
  .dbar__brand{margin-left:auto;}
  .dbar__brand img{height:22px;}
  .dbar__source{flex-wrap:wrap;}
  .dbar__badge{order:1;}
  .dbar__play{order:2;margin-left:auto;}
  .dbar__field{order:3;flex:1 1 100%;}
}

/* --- metrics sub-bar (#fixedBarOnTop) --- */
body.qlauncher #fixedBarOnTop.fixed-top2{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  z-index:1039;
}
body.qlauncher #fixedBarOnTop .q-head{
  height:auto;min-height:56px;color:var(--fg)!important;
  font-family:var(--font-body);font-size:var(--text-sm);
  padding:10px 0;
}
body.qlauncher #fixedBarOnTop strong{color:var(--fg-strong);font-weight:700;}
body.qlauncher #fixedBarOnTop .q-head__sep{color:var(--border-strong);}
body.qlauncher #mainEfficiency{color:var(--accent)!important;font-weight:800;}
body.qlauncher #mainkB{color:var(--accent)!important;}
body.qlauncher #mainTotal{color:var(--accent-deep)!important;}
body.qlauncher #mainViewers{color:var(--fg-strong);font-weight:800;}
body.qlauncher #fixedBarOnTop small{color:var(--fg-muted);}

/* + add a viewer */
body.qlauncher .addPlayerButton{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);
  line-height:1;
  background:var(--surface-2);color:var(--fg-strong);
  border:1px solid var(--border-strong);border-radius:var(--r-pill);
  padding:.55rem 1rem;box-shadow:none;
  transition:all var(--dur) var(--ease);
}
body.qlauncher .addPlayerButton:hover{
  color:#fff!important;background:var(--accent)!important;
  border-color:var(--accent)!important;box-shadow:var(--shadow-accent)!important;
}
body.qlauncher .addPlayerButton.is-pulsing{
  animation:q-add-player-pulse 3.6s var(--ease) infinite;
  border-color:rgba(33,188,238,.55);
}
/* idle most of the cycle, then a short attention pulse every few seconds */
@keyframes q-add-player-pulse{
  0%,60%,100%{
    transform:translateY(0) scale(1);
    box-shadow:0 0 0 0 rgba(33,188,238,0);
    border-color:rgba(33,188,238,.35);
  }
  70%{
    transform:translateY(-1px) scale(1.04);
    box-shadow:0 0 0 5px rgba(33,188,238,.30),0 12px 26px -16px rgba(17,107,248,.8);
    border-color:rgba(33,188,238,.85);
  }
  82%{
    transform:translateY(0) scale(1);
    box-shadow:0 0 0 12px rgba(33,188,238,0);
    border-color:rgba(33,188,238,.45);
  }
}

/* first empty player slot */
body.qlauncher .q-item--starter{
  display:flex;
  align-self:stretch;
}
body.qlauncher .q-add-slot{
  width:100%;
  min-height:clamp(300px,28vw,520px);
  display:grid;
  place-items:center;
  margin:0 0 12px;
  border:1px dashed rgba(17,107,248,.34);
  border-radius:var(--r-lg);
  background:
    linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.28)),
    radial-gradient(90% 120% at 50% 0%,rgba(33,188,238,.16),rgba(17,107,248,.04) 52%,transparent 76%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 20px 50px -38px rgba(5,15,38,.42);
}
body.qlauncher .q-add-slot__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:154px;
  min-height:48px;
  padding:0 1.35rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:var(--action-bg);
  color:#fff;
  box-shadow:0 14px 28px -16px rgba(17,107,248,.92);
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
body.qlauncher .q-add-slot__button:hover,
body.qlauncher .q-add-slot__button:focus-visible{
  background:var(--action-hover);
  transform:translateY(-1px);
  box-shadow:var(--shadow-accent);
}
body.qlauncher .q-add-slot__button:focus-visible{
  outline:3px solid rgba(33,188,238,.36);
  outline-offset:3px;
}
body.qlauncher .q-add-slot__button:active{transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  body.qlauncher .addPlayerButton.is-pulsing{animation:none;box-shadow:0 0 0 4px rgba(33,188,238,.16);}
}

/* content notes */
body.qlauncher #container small{color:var(--fg-muted);font-family:var(--font-body);}
body.qlauncher #container.q-cont{
  margin-left:clamp(4px,1.2vw,8px);
  margin-right:clamp(4px,1.2vw,8px);
}
body.qlauncher #myContainer.q-row{align-items:stretch;}
body.qlauncher .q-item{padding:0 10px;min-width:0;}
body.qlauncher .q-item iframe{display:block;border-radius:var(--r-md);}

@media (max-width:900px){
  body.qlauncher #container.q-cont{margin-left:0;margin-right:0;}
  body.qlauncher #myContainer.q-row{gap:12px;justify-content:flex-start;}
  body.qlauncher #myContainer .q-item{
    flex:0 0 100%;max-width:100%;width:100%;
    padding:0 clamp(8px,3vw,14px);
  }
  body.qlauncher #myContainer #part1{order:1!important;}
  body.qlauncher #myContainer #part2{order:2!important;}
  body.qlauncher .q-add-slot{
    min-height:clamp(180px,44vw,320px);
    margin-bottom:0;
  }
}

@media (max-width:760px){
  body.qlauncher #fixedBarOnTop.fixed-top2{
    display:flex;align-items:center;flex-wrap:wrap;gap:7px 8px;
    padding:7px 10px;
  }
  body.qlauncher #fixedBarOnTop .q-row{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;
    gap:6px 8px;margin:0;
  }
  body.qlauncher #fixedBarOnTop .q-head{
    min-height:0;padding:0;font-size:.76rem;line-height:1.25;
    display:flex;align-items:center;flex-wrap:wrap;gap:3px 5px;
  }
  body.qlauncher #fixedBarOnTop .q-head:first-child{
    flex:1 1 100%;justify-content:center;text-align:center;
  }
  body.qlauncher #fixedBarOnTop .q-head:nth-of-type(2){
    flex:1 1 auto;justify-content:flex-start;
  }
  body.qlauncher #fixedBarOnTop .q-head__sep,
  body.qlauncher #fixedBarOnTop .q-head__refresh{
    display:none!important;
  }
  body.qlauncher .addPlayerButton{
    min-height:38px;padding:.45rem .78rem;font-size:.78rem;
  }
}

@media (max-width:480px){
  body.qlauncher #fixedBarOnTop.fixed-top2{padding:6px 8px;}
  body.qlauncher #fixedBarOnTop .q-head:first-child{
    font-size:.72rem;justify-content:flex-start;text-align:left;
  }
  body.qlauncher .addPlayerButton{min-height:36px;padding:.42rem .68rem;}
}

/* footer info notes (session / streamboost) */
body.qlauncher .qnotes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;margin:22px clamp(8px,2vw,16px) 4px;
}
body.qlauncher .qnote{
  display:flex;align-items:flex-start;gap:13px;
  padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
body.qlauncher .qnote:hover{border-color:var(--border-accent);box-shadow:var(--shadow-md);transform:translateY(-2px);}
body.qlauncher .qnote__ic{
  flex:none;display:grid;place-items:center;width:36px;height:36px;
  border-radius:11px;color:var(--accent);
  background:var(--signal-bg);border:1px solid var(--border-accent);
}
body.qlauncher .qnote__ic svg{width:19px;height:19px;}
body.qlauncher .qnote__tx{
  margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--fg-2);
}
body.qlauncher .qnote__tx strong{
  display:block;margin-bottom:2px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--fg-strong);
}

/* ============================================================
   2. PLAYER  (body.qplayer = player/[mode]/player.html, inside iframe)
   ============================================================ */
body.qplayer{
  margin:0;background:transparent;color:#eaf0fb;font-family:var(--font-body);
}
.qvideo{position:relative;overflow:hidden;border-radius:var(--r-md);}
.qvideo .video-js,.qvideo video{border-radius:var(--r-md);overflow:hidden;}

/* overlay root spans the video; only its cards capture pointer events */
.qov{
  position:absolute;inset:0;pointer-events:none;z-index:30;overflow:hidden;
  font-family:var(--font-body);
}

/* expanded glass panel — top-aligned so compact laptop screens see stats first */
.qov__panel{
  pointer-events:auto;position:absolute;left:16px;right:16px;top:16px;bottom:auto;
  width:auto;max-height:calc(100% - 32px);
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(6,15,38,.88);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08);
  color:#eaf0fb;
  transform-origin:left center;
  animation:qov-pop var(--dur) var(--ease);
}
@keyframes qov-pop{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes qov-fold-left{
  from{opacity:1;transform:translateX(0) scaleX(1);clip-path:inset(0 0 0 0);}
  to{opacity:0;transform:translateX(-18px) scaleX(.08);clip-path:inset(0 92% 0 0);}
}
@keyframes qov-unfold-right{
  from{opacity:0;transform:translateX(-18px) scaleX(.08);clip-path:inset(0 92% 0 0);}
  to{opacity:1;transform:translateX(0) scaleX(1);clip-path:inset(0 0 0 0);}
}

.qov__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
}
.qov__title{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
}
.qov__dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 4px rgba(33,188,238,.18);
  animation:qov-pulse 2.4s var(--ease) infinite;
}
@keyframes qov-pulse{0%,100%{box-shadow:0 0 0 3px rgba(33,188,238,.22);}50%{box-shadow:0 0 0 7px rgba(33,188,238,0);}}

.qov__btn{
  display:inline-grid;place-items:center;width:28px;height:28px;flex:none;
  border:none;border-radius:9px;background:rgba(255,255,255,.08);
  color:#cfe0ff;cursor:pointer;transition:background var(--dur) var(--ease);
}
.qov__btn:hover{background:rgba(255,255,255,.18);color:#fff;}
.qov__btn svg{width:16px;height:16px;}
.qov__min svg{transform:translateX(-1px);}

.qov__body{padding:12px;overflow:auto;font-size:11px;}
.qov__body::-webkit-scrollbar{width:8px;}
.qov__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;}

/* latency/buffer chip row (ULL) */
.qov__lat{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;
  font-family:var(--font-mono);font-size:.72rem;color:#cfe0ff;
}
.qov__lat span{color:var(--accent-2);font-weight:700;}

/* collapsed pill — top-left, clear of the player control bar */
.qov__bar{
  pointer-events:auto;position:absolute;left:14px;top:14px;bottom:auto;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:var(--r-pill);
  background:rgba(6,15,38,.88);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);color:#eaf0fb;
  font-family:var(--font-display);font-weight:600;font-size:.78rem;letter-spacing:.01em;
  cursor:pointer;box-shadow:0 14px 34px -18px rgba(0,0,0,.8);
  transform-origin:left center;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.qov__bar:hover{background:rgba(12,28,64,.86);transform:translateY(-1px);}
.qov__bar-ic{display:inline-grid;place-items:center;color:var(--accent-2);}
.qov__bar-ic svg{width:15px;height:15px;display:block;}
.qov__bar-chev{display:inline-grid;place-items:center;color:#aebbd6;}
.qov__bar-chev svg{width:14px;height:14px;display:block;}

/* state switching */
.qov[data-state="expanded"] .qov__bar{display:none;}
.qov[data-state="collapsed"] .qov__panel{display:none;}
.qov.is-collapsing .qov__panel{
  animation:qov-fold-left 240ms var(--ease) forwards;
  pointer-events:none;
}
.qov.is-expanding .qov__panel{
  animation:qov-unfold-right 260ms var(--ease) both;
}
.qov[data-state="collapsed"] .qov__bar{
  animation:qov-unfold-right 220ms var(--ease) both;
}

/* legacy Chartist visualize tool is replaced by qstats — keep hidden in DOM */
.qov #quanteec-visualize-tool{display:none!important;}

/* ---- P2P stats (tiles + ApexCharts) ---- */
.qstats{display:flex;flex-direction:column;gap:12px;}

.qstats__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;}
.qstats__tile{
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),rgba(14,24,50,.78);
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;padding:9px 12px;
}
.qstats__tlabel{
  font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
  color:#8ea0c2;font-weight:700;
}
.qstats__tval{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.12;
  color:#fff;font-variant-numeric:tabular-nums;
}
.qstats__tsub{font-size:.6rem;color:#7e8eae;}
.qstats__tile--hero{
  background:linear-gradient(135deg,rgba(33,188,238,.22),rgba(47,125,255,.14)),rgba(14,24,50,.78);
  border-color:rgba(33,188,238,.38);
}
.qstats__tile--hero .qstats__tval{font-size:1.45rem;color:var(--accent-2);}
.qstats__tile--send{
  background:linear-gradient(135deg,rgba(47,125,255,.22),rgba(33,188,238,.14)),rgba(14,24,50,.78);
  border-color:rgba(47,125,255,.34);
}

.qstats__charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.qstats__chart{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(14,24,50,.74);
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;padding:8px 4px 0;min-width:0;
}
.qstats__ctitle{
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:#9fb0d0;font-weight:700;padding:2px 8px 2px;
}
.qstats .apexcharts-tooltip{font-family:var(--font-body)!important;}

/* small screens / narrow viewers */
@media (max-height:760px),(max-width:900px){
  .qov__panel{left:10px;right:10px;top:10px;max-height:calc(100% - 20px);}
  .qov__head{padding:8px 10px;}
  .qov__body{padding:9px;}
  .qov__bar{left:10px;top:10px;bottom:auto;}
  .qstats{gap:8px;}
  .qstats__tiles{grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:6px;}
  .qstats__tile{border-radius:11px;padding:7px 9px;}
  .qstats__tlabel{font-size:.56rem;}
  .qstats__tval{font-size:.95rem;}
  .qstats__tile--hero .qstats__tval{font-size:1.18rem;}
  .qstats__tsub{font-size:.56rem;}
  .qstats__charts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .qstats__chart{border-radius:11px;padding:6px 2px 0;}
  .qstats__ctitle{font-size:.58rem;padding:0 6px;}
}

@media (max-width:620px){
  .qov__panel{left:8px;right:8px;top:8px;max-height:calc(100% - 16px);}
  .qov__head{padding:4px 7px;}
  .qov__title{gap:6px;font-size:.62rem;}
  .qov__dot{width:6px;height:6px;}
  .qov__btn{width:24px;height:24px;border-radius:8px;}
  .qov__btn svg{width:14px;height:14px;}
  .qov__body{padding:7px;}
  .qstats{gap:6px;}
  .qstats__tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
  .qstats__tile{border-radius:10px;padding:6px 7px;}
  .qstats__tlabel{font-size:.51rem;letter-spacing:.055em;}
  .qstats__tval{font-size:.86rem;}
  .qstats__tile--hero .qstats__tval{font-size:1.05rem;}
  .qstats__tsub{display:none;}
  .qstats__charts{gap:6px;}
  .qstats__chart{border-radius:10px;padding:5px 1px 0;}
  .qstats__ctitle{font-size:.52rem;padding:0 5px;}
}

@media (max-width:430px){
  .qov__panel{left:8px;right:8px;top:8px;max-height:calc(100% - 16px);}
  .qov__body{padding:8px;}
  .qov__bar{left:8px;top:8px;bottom:auto;}
  .qstats__tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .qstats__charts{grid-template-columns:1fr;}
}

/* ---- mobile: Summary / Graph tabs so the popup fits with NO scrolling ---- */
.qstats__tabs{display:none;gap:6px;margin-bottom:8px;}
.qstats__tab-btn{
  flex:1;min-height:30px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#aebbd6;
  font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.02em;
  border-radius:var(--r-pill);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.qstats__tab-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}

@media (max-width:620px){
  /* TALL portrait player frame so the stats panel fits with NO scrolling.
     The video fills the frame as a (cropped) background; the panel sits over it. */
  body.qplayer .qvideo{height:clamp(380px,118vw,560px);}
  body.qplayer .qvideo #player1{
    position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;
  }
  body.qplayer .qvideo #player1.video-js{padding:0!important;}
  body.qplayer .qvideo #player1.video-js .vjs-tech{object-fit:cover;}

  /* tabs */
  .qstats__tabs{display:flex;margin-bottom:8px;}
  .qstats__tab-btn{min-height:30px;font-size:.74rem;}
  .qov__body{overflow:hidden;}
  .qstats{gap:8px;}
  /* three tabs: show only the active panel (Summary / Received / Sent) */
  .qstats[data-tab="summary"] [data-panel="received"],
  .qstats[data-tab="summary"] [data-panel="sent"]{display:none;}
  .qstats[data-tab="received"] [data-panel="summary"],
  .qstats[data-tab="received"] [data-panel="sent"]{display:none;}
  .qstats[data-tab="sent"] [data-panel="summary"],
  .qstats[data-tab="sent"] [data-panel="received"]{display:none;}
  /* Summary: core KPIs (secondary hidden), readable 2-col, heroes don't span */
  .qstats__tile[data-sec]{display:none;}
  .qstats__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .qstats__tile{padding:9px 11px;border-radius:12px;}
  .qstats__tile--hero{grid-column:auto;}
  .qstats__tlabel{font-size:.58rem;}
  .qstats__tval{font-size:1.05rem;}
  .qstats__tile--hero .qstats__tval{font-size:1.4rem;}
  .qstats__tsub{display:none;}
  /* Charts: one per tab, full width, no in-card title (the tab names them) */
  .qstats__charts{grid-template-columns:1fr;}
  .qstats__ctitle{display:none;}
}

/* ============================================================
   3. DELIVERY STRUCTURE (topology) VIEW
   ============================================================ */
/* toggle button in the metrics bar */
body.qlauncher #fixedBarOnTop{position:fixed;left:0;right:0;width:100%;}
.qtopo-btn{
  position:absolute;right:clamp(10px,2vw,20px);top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--fg-strong);
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-pill);
  padding:.5rem .95rem;transition:all var(--dur) var(--ease);
}
.qtopo-btn:hover{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:var(--shadow-accent);}
.qtopo-btn.is-on{color:#fff;background:var(--accent);border-color:var(--accent);}
.qtopo-ic{width:18px;height:18px;}
.qtopo-btn .qtopo-ic--out{display:none;}
body.qtopo-on .qtopo-btn .qtopo-ic--in{display:none;}
body.qtopo-on .qtopo-btn .qtopo-ic--out{display:inline;}
@media (max-width:680px){.qtopo-btn__tx{display:none;}}

@media (max-width:760px){
  .qtopo-btn{
    position:static;transform:none;flex:0 0 auto;margin-left:auto;
    min-height:38px;padding:.45rem .72rem;
  }
  .qtopo-btn:hover{transform:none;}
}

@media (max-width:480px){
  .qtopo-btn{width:38px;padding:0;gap:0;}
  .qtopo-ic{width:17px;height:17px;}
}

/* view switching — overlay ON TOP of the running, dimmed players */
#qtopo-stage{display:none;}
body.qtopo-on #container{position:relative;}
body.qtopo-on #myContainer{
  filter:brightness(.28) saturate(.55) blur(1px);
  padding-top:104px;
  transition:filter .35s var(--ease),padding .3s var(--ease);pointer-events:none;
}
body.qtopo-on #qtopo-stage{display:block;}
body.qtopo-on .qnotes{display:none;}

/* stage = transparent overlay; box positioned over the grid by JS */
.qtopo-stage{
  position:absolute;z-index:5;pointer-events:none;overflow:visible;
  border-radius:var(--r-lg);
  background:radial-gradient(70% 80% at 50% 30%, rgba(5,11,31,.22), rgba(5,11,31,.42));
}
.qtopo-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.qtopo-banner{
  position:absolute;left:0;right:0;top:0;z-index:2;
  padding:13px 18px;font-size:var(--text-sm);line-height:1.45;color:#c7d4ee;
  background:linear-gradient(180deg,rgba(5,13,34,.9),rgba(5,13,34,0));
}
.qtopo-banner strong{color:#fff;font-weight:700;}
.qtopo-banner em{color:var(--accent-2);font-style:normal;}
.qtopo-legend{
  position:absolute;right:16px;bottom:14px;z-index:2;display:flex;gap:16px;
  padding:8px 13px;border-radius:var(--r-pill);
  background:rgba(6,15,38,.6);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);
  font-size:var(--text-xs);color:#c7d4ee;
}
.qtopo-leg{display:inline-flex;align-items:center;gap:7px;}
.qtopo-leg__dot{width:9px;height:9px;border-radius:50%;}
.qtopo-leg__dot--cdn{background:#2f7dff;box-shadow:0 0 8px #2f7dff;}
.qtopo-leg__dot--peer{background:#21BCEE;box-shadow:0 0 8px #21BCEE;}

/* nodes */
.qt-halo{fill:rgba(255,255,255,.04);}
.qt-disc{fill:#0e2150;stroke:rgba(255,255,255,.18);stroke-width:1.5;}
.qt-node--cdn .qt-disc{fill:#11306e;stroke:rgba(47,125,255,.6);}
.qt-node--viewer .qt-disc{fill:#0f2a5e;stroke:rgba(33,188,238,.55);}
.qt-node--peer .qt-disc{fill:#11244e;stroke:rgba(255,255,255,.2);}
.qt-glyph{fill:none;stroke:#dbe7ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.qt-node--cdn .qt-glyph{stroke:#9cc2ff;}
.qt-node--viewer .qt-glyph{stroke:#bfeaff;}
.qt-num{fill:#fff;font-family:var(--font-display);font-weight:800;font-size:20px;}
.qt-label{fill:#eaf0fb;font-family:var(--font-display);font-weight:600;font-size:12.5px;}
.qt-sub{fill:#9fb0d0;font-family:var(--font-body);font-size:10.5px;}

/* edges + animated packets */
.qt-edge{fill:none;stroke-width:1.4;}
.qt-edge--cdn{stroke:rgba(47,125,255,.28);stroke-dasharray:4 5;}
.qt-edge--peer{stroke:rgba(33,188,238,.32);stroke-dasharray:3 6;}
.qt-edge-label{
  fill:#eef5ff;font-family:var(--font-display);font-weight:700;font-size:11px;
  paint-order:stroke;stroke:rgba(4,10,27,.86);stroke-width:5px;stroke-linejoin:round;
}
.qt-edge-label--cdn{fill:#aecaff;}
.qt-edge-label--peer{fill:#c8f3ff;}
.qt-pkt--cdn{fill:#5b9bff;filter:drop-shadow(0 0 4px #2f7dff);}
.qt-pkt--peer{fill:#3fd2ff;filter:drop-shadow(0 0 4px #21BCEE);}