:root{
  --qq-bg:#121212;
  --qq-card:#151515;
  --qq-border:#303030;
  --qq-text:#ffffff;
  --qq-muted:#c5cbd2;
  --qq-cyan:#00AEEF;
  --qq-blue:#0066CC;
}

.qq-hidden{ display:none !important; }

.qq-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem 1.1rem;
  border-radius:9999px;
  background:linear-gradient(135deg, rgba(0,174,239,.18), rgba(0,102,204,.18));
  border:1px solid rgba(0,174,239,.35);
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  transition:.2s ease;
}

.qq-fab:hover{
  border-color:rgba(0,174,239,.55);
  transform:translateY(-1px);
}

.qq-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:flex-end;
  z-index:60;
  padding:18px 18px 92px 18px;
  background:transparent;
  pointer-events:none;
}

.qq-overlay.open{
  display:flex;
}

.qq-overlay.open .qq-modal{
  pointer-events:auto;
}

.qq-modal{
  width:min(360px, calc(100vw - 36px));
  max-height:min(58vh, 480px);
  overflow:auto;
  border-radius:18px;
  background:#0e0e0e;
  border:1px solid var(--qq-border);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  color:var(--qq-text);
}

.qq-card{
  background:var(--qq-card);
  border:1px solid var(--qq-border);
}

.qq-muted{
  color:var(--qq-muted);
}

.qq-btn-ghost{
  background:#0f172a;
  border:1px solid var(--qq-border);
  color:var(--qq-text);
  transition:.2s ease;
}

.qq-btn-ghost:hover{
  background:#172033;
  border-color:#3b4452;
}

.qq-search-shell{
  display:flex;
  gap:.6rem;
  align-items:center;
}

.qq-search-input{
  flex:1 1 auto;
  min-width:0;
  background:#0c0c0c;
  border:1px solid var(--qq-border);
  color:#fff;
  border-radius:14px;
  padding:.8rem .95rem;
  outline:none;
}

.qq-btn-inline{
  flex:0 0 auto;
  padding:.8rem .95rem;
}

.qq-search-input:focus{
  border-color:rgba(0,174,239,.5);
  box-shadow:0 0 0 3px rgba(0,174,239,.12);
}

.qq-btn-primary{
  background:linear-gradient(135deg, rgba(0,174,239,.22), rgba(0,102,204,.22));
  border:1px solid rgba(0,174,239,.35);
  color:#fff;
  border-radius:14px;
  padding:.9rem 1rem;
  transition:.2s ease;
  white-space:nowrap;
}

.qq-btn-primary:hover{
  border-color:rgba(0,174,239,.55);
  background:linear-gradient(135deg, rgba(0,174,239,.28), rgba(0,102,204,.28));
}

.qq-tag{
  display:inline-flex;
  align-items:center;
  border-radius:9999px;
  padding:.22rem .6rem;
  font-size:.72rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#dbe5ee;
}

.qq-metric{
  background:#121212;
  border:1px solid var(--qq-border);
  border-radius:18px;
  padding:.85rem;
}

.qq-metric-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--qq-muted);
}

.qq-metric-value{
  margin-top:.3rem;
  font-size:1.05rem;
  font-weight:800;
  color:#fff;
}

.qq-var-up{ color:#22c55e; }
.qq-var-down{ color:#f87171; }
.qq-var-flat{ color:#c5cbd2; }

@media (max-width:640px){
  .qq-fab span:last-child{
    display:none;
  }

  .qq-overlay{
    padding:12px 12px 84px 12px;
  }

    .qq-modal{
    width:calc(100vw - 20px);
    max-height:68vh;
    border-radius:18px;
    }
}